

import { DriverRatingPill } from '@/components/drivers/DriverRatingPill';
import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
import { Badge } from '@/ui/Badge';
import { Button } from '@/ui/Button';
import { CountryFlag } from '@/ui/CountryFlag';
import { Heading } from '@/ui/Heading';
import { Image } from '@/ui/Image';
import { PlaceholderImage } from '@/ui/PlaceholderImage';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

interface ProfileHeaderProps {
  driver: DriverViewModel;
  rating?: number | null;
  rank?: number | null;
  isOwnProfile?: boolean;
  onEditClick?: () => void;
  teamName?: string | null;
  teamTag?: string | null;
}

export function ProfileHeader({
  driver,
  rating,
  rank,
  isOwnProfile = false,
  onEditClick,
  teamName,
  teamTag,
}: ProfileHeaderProps) {
  return (
    <Stack display="flex" alignItems="start" justifyContent="between">
      <Stack display="flex" alignItems="start" gap={4}>
        <Stack 
          w="20" 
          h="20" 
          rounded="full" 
          bg="bg-gradient-to-br from-primary-blue to-purple-600" 
          overflow="hidden" 
          display="flex" 
          alignItems="center" 
          justifyContent="center"
        >
          {driver.avatarUrl ? (
            <Image
              src={driver.avatarUrl}
              alt={driver.name}
              width={80}
              height={80}
              className="w-full h-full object-cover"
            />
          ) : (
            <PlaceholderImage size={80} />
          )}
        </Stack>
        
        <Stack>
          <Stack display="flex" alignItems="center" gap={3} mb={2}>
            <Heading level={1}>{driver.name}</Heading>
            {driver.country && <CountryFlag countryCode={driver.country} size="lg" />}
            {teamTag && (
              <Badge variant="primary">
                {teamTag}
              </Badge>
            )}
          </Stack>
          
          <Stack display="flex" alignItems="center" gap={4}>
            <Text size="sm" color="text-gray-400">iRacing ID: {driver.iracingId}</Text>
            {teamName && (
              <Stack direction="row" align="center" gap={2}>
                <Text size="sm" color="text-gray-400">•</Text>
                <Text size="sm" color="text-primary-blue">
                  {teamTag ? `[${teamTag}] ${teamName}` : teamName}
                </Text>
              </Stack>
            )}
          </Stack>

          {(typeof rating === 'number' || typeof rank === 'number') && (
            <Stack mt={2}>
              <DriverRatingPill rating={rating ?? null} rank={rank ?? null} />
            </Stack>
          )}
        </Stack>
      </Stack>

      {isOwnProfile && (
        <Button variant="secondary" onClick={onEditClick}>
          Edit Profile
        </Button>
      )}
    </Stack>
  );
}
