

import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
import { Zap } from 'lucide-react';
import { Badge } from '@/ui/Badge';
import { Stack } from '@/ui/Stack';
import { Icon } from '@/ui/Icon';
import { Image } from '@/ui/Image';
import { Text } from '@/ui/Text';

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}
      display="flex"
      alignItems="center"
      gap={3}
      p={3}
      rounded="xl"
      cursor="pointer"
      transition
      bg={isCurrentUser ? 'bg-primary-blue/10' : 'transparent'}
      border
      borderColor={isCurrentUser ? 'border-primary-blue/30' : 'transparent'}
      hoverBorderColor={isCurrentUser ? 'primary-blue/40' : 'charcoal-outline/20'}
    >
      <Stack 
        display="flex" 
        alignItems="center" 
        justifyContent="center" 
        w="8" 
        h="8" 
        rounded="lg" 
        bg="bg-iron-gray" 
        color="text-gray-500"
        style={{ fontWeight: '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 ? 'border-primary-blue' : ''}
        >
          <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="bg-deep-graphite" 
          display="flex" 
          alignItems="center" 
          justifyContent="center" 
          style={{ fontSize: '0.625rem' }}
        >
          {CountryFlagDisplay.fromCountryCode(country).toString()}
        </Stack>
      </Stack>

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

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