import { CountryFlagFormatter } from '@/lib/formatters/CountryFlagFormatter';
import { Badge } from '@/ui/Badge';
import { Icon } from '@/ui/Icon';
import { Image } from '@/ui/Image';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Zap } from 'lucide-react';

interface DriverEntryRowProps {
  index: number;
  name: string;
  avatarUrl: string;
  country: string;
  rating?: number | null;
  isCurrentUser: boolean;
  onClick: () => void;
}

export function DriverEntryRow({
  index,
  name,
  avatarUrl,
  country,
  rating,
  isCurrentUser,
  onClick,
}: DriverEntryRowProps) {
  return (
    <Stack
      onClick={onClick}
      direction="row"
      align="center"
      gap={3}
      p={3}
      rounded="xl"
      cursor="pointer"
      transition
      bg={isCurrentUser ? 'rgba(25, 140, 255, 0.1)' : 'transparent'}
      border
      borderColor={isCurrentUser ? 'rgba(25, 140, 255, 0.3)' : 'transparent'}
      hoverBorderColor={isCurrentUser ? 'rgba(25, 140, 255, 0.4)' : 'var(--ui-color-border-low)'}
    >
      <Stack 
        display="flex" 
        alignItems="center" 
        justifyContent="center" 
        w="8" 
        h="8" 
        rounded="lg" 
        bg="var(--ui-color-bg-surface-muted)" 
        color="var(--ui-color-text-low)"
        weight="bold"
        fontSize="0.875rem"
      >
        {index + 1}
      </Stack>

      <Stack position="relative" flexShrink={0}>
        <Stack 
          w="10" 
          h="10" 
          rounded="full" 
          overflow="hidden" 
          border={isCurrentUser} 
          borderColor={isCurrentUser ? 'var(--ui-color-intent-primary)' : ''}
        >
          <Image 
            src={avatarUrl} 
            alt={name} 
            width={40} 
            height={40} 
            objectFit="cover" 
            fill
          />
        </Stack>
        <Stack 
          position="absolute" 
          bottom="-0.5" 
          right="-0.5" 
          w="5" 
          h="5" 
          rounded="full" 
          bg="var(--ui-color-bg-base)" 
          display="flex" 
          alignItems="center" 
          justifyContent="center" 
          fontSize="0.625rem"
        >
          {CountryFlagFormatter.fromCountryCode(country).toString()}
        </Stack>
      </Stack>

      <Stack flexGrow={1} minWidth="0">
        <Stack direction="row" align="center" gap={2}>
          <Text 
            weight="semibold" 
            size="sm" 
            variant={isCurrentUser ? 'primary' : 'high'} 
            truncate
          >
            {name}
          </Text>
          {isCurrentUser && <Badge variant="primary">You</Badge>}
        </Stack>
        <Text size="xs" variant="low">{country}</Text>
      </Stack>

      {rating != null && (
        <Badge variant="warning">
          <Icon icon={Zap} size={3} />
          {rating}
        </Badge>
      )}
    </Stack>
  );
}