gridpilot.gg/apps/website/components/drivers/ProfileHero.tsx

import { mediaConfig } from '@/lib/config/mediaConfig';
import { CountryFlagFormatter } from '@/lib/formatters/CountryFlagFormatter';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Image } from '@/ui/Image';
import { Link } from '@/ui/Link';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { Calendar, Clock, ExternalLink, Globe, Star, Trophy, UserPlus } from 'lucide-react';

interface ProfileHeroProps {
  driver: {
    name: string;
    avatarUrl?: string;
    country: string;
    iracingId: number;
    joinedAtLabel: string;
  };
  stats: {
    ratingLabel: string;
  } | null;
  globalRankLabel: string;
  timezone: string;
  socialHandles: {
    platform: string;
    handle: string;
    url: string;
  }[];
  onAddFriend: () => void;
  friendRequestSent: boolean;
}

function getSocialIcon(platform: string) {
  const { Twitter, Youtube, Twitch, MessageCircle } = require('lucide-react');
  switch (platform) {
    case 'twitter': return Twitter;
    case 'youtube': return Youtube;
    case 'twitch': return Twitch;
    case 'discord': return MessageCircle;
    default: return Globe;
  }
}

export function ProfileHero({
  driver,
  stats,
  globalRankLabel,
  timezone,
  socialHandles,
  onAddFriend,
  friendRequestSent,
}: ProfileHeroProps) {
  return (
    <Surface 
      variant="muted" 
      rounded="2xl" 
      border 
      padding={6} 
      bg="linear-gradient(to bottom right, rgba(38, 38, 38, 0.8), rgba(38, 38, 38, 0.6), var(--ui-color-bg-base))" 
      borderColor="var(--ui-color-border-low)"
    >
      <Stack direction="row" align="start" gap={6} wrap>
        {/* Avatar */}
        <Box position="relative">
          <Stack 
            w="28" 
            h="28" 
            rounded="xl" 
            bg="linear-gradient(to bottom right, var(--ui-color-intent-primary), rgba(147, 51, 234, 1))" 
            padding={1} 
            shadow="xl"
          >
            <Stack fullWidth fullHeight rounded="lg" overflow="hidden" bg="var(--ui-color-bg-surface-muted)">
              <Image
                src={driver.avatarUrl || mediaConfig.avatars.defaultFallback}
                alt={driver.name}
                width={144}
                height={144}
                objectFit="cover"
                fill
              />
            </Stack>
          </Stack>
        </Box>

        {/* Driver Info */}
        <Stack flex={1} minWidth="0">
          <Stack direction="row" align="center" gap={3} wrap mb={2}>
            <Heading level={1}>{driver.name}</Heading>
            <Text size="4xl" aria-label={`Country: ${driver.country}`}>
              {CountryFlagFormatter.fromCountryCode(driver.country).toString()}
            </Text>
          </Stack>

          {/* Rating and Rank */}
          <Stack direction="row" align="center" gap={4} wrap mb={4}>
            {stats && (
              <>
                <Surface variant="muted" rounded="lg" padding={1} bg="rgba(25, 140, 255, 0.1)" border borderColor="rgba(25, 140, 255, 0.3)" px={3}>
                  <Stack direction="row" align="center" gap={2}>
                    <Icon icon={Star} size={4} intent="primary" />
                    <Text font="mono" weight="bold" variant="primary">{stats.ratingLabel}</Text>
                    <Text size="xs" variant="low">Rating</Text>
                  </Stack>
                </Surface>
                <Surface variant="muted" rounded="lg" padding={1} bg="rgba(250, 204, 21, 0.1)" border borderColor="rgba(250, 204, 21, 0.3)" px={3}>
                  <Stack direction="row" align="center" gap={2}>
                    <Icon icon={Trophy} size={4} intent="warning" />
                    <Text font="mono" weight="bold" color="rgba(250, 204, 21, 1)">{globalRankLabel}</Text>
                    <Text size="xs" variant="low">Global</Text>
                  </Stack>
                </Surface>
              </>
            )}
          </Stack>

          {/* Meta info */}
          <Stack direction="row" align="center" gap={4} wrap color="var(--ui-color-text-low)">
            <Stack direction="row" align="center" gap={1.5}>
              <Icon icon={Globe} size={4} />
              <Text size="sm">iRacing: {driver.iracingId}</Text>
            </Stack>
            <Stack direction="row" align="center" gap={1.5}>
              <Icon icon={Calendar} size={4} />
              <Text size="sm">
                Joined {driver.joinedAtLabel}
              </Text>
            </Stack>
            <Stack direction="row" align="center" gap={1.5}>
              <Icon icon={Clock} size={4} />
              <Text size="sm">{timezone}</Text>
            </Stack>
          </Stack>
        </Stack>

        {/* Action Buttons */}
        <Stack>
          <Button
            variant="primary"
            onClick={onAddFriend}
            disabled={friendRequestSent}
            icon={<Icon icon={UserPlus} size={4} />}
          >
            {friendRequestSent ? 'Request Sent' : 'Add Friend'}
          </Button>
        </Stack>
      </Stack>

      {/* Social Handles */}
      {socialHandles.length > 0 && (
        <Stack mt={6} pt={6} borderTop borderColor="rgba(255, 255, 255, 0.05)">
          <Stack direction="row" align="center" gap={2} wrap>
            <Text size="sm" variant="low" mr={2}>Connect:</Text>
            {socialHandles.map((social) => {
              const SocialIcon = getSocialIcon(social.platform);
              return (
                <Stack key={social.platform}>
                  <Link
                    href={social.url}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <Surface variant="muted" rounded="lg" padding={1} display="flex" alignItems="center" gap={2} px={3} bg="rgba(255, 255, 255, 0.05)" border borderColor="var(--ui-color-border-low)" color="var(--ui-color-text-low)">
                      <Icon icon={SocialIcon} size={4} />
                      <Text size="sm">{social.handle}</Text>
                      <Icon icon={ExternalLink} size={3} opacity={0.5} />
                    </Surface>
                  </Link>
                </Stack>
              );
            })}
          </Stack>
        </Stack>
      )}
    </Surface>
  );
}