import { Box } from '@/ui/Box';
import { Image } from '@/ui/Image';
import { Text } from '@/ui/Text';

interface ActiveDriverCardProps {
  name: string;
  avatarUrl?: string;
  categoryLabel?: string;
  categoryColor?: string;
  skillLevelLabel?: string;
  skillLevelColor?: string;
  onClick: () => void;
}

export function ActiveDriverCard({
  name,
  avatarUrl,
  categoryLabel,
  categoryColor,
  skillLevelLabel,
  skillLevelColor,
  onClick,
}: ActiveDriverCardProps) {
  return (
    <Box
      as="button"
      type="button"
      onClick={onClick}
      p={3}
      rounded="xl"
      bg="bg-iron-gray/40"
      border
      borderColor="border-charcoal-outline"
      transition
      cursor="pointer"
      hoverBorderColor="performance-green/40"
      group
      textAlign="center"
    >
      <Box position="relative" w="12" h="12" mx="auto" rounded="full" overflow="hidden" border borderColor="border-charcoal-outline" mb={2}>
        <Image src={avatarUrl || '/default-avatar.png'} alt={name} objectFit="cover" fill />
        <Box position="absolute" bottom="0" right="0" w="3" h="3" rounded="full" bg="bg-performance-green" border borderColor="border-iron-gray" style={{ borderWidth: '2px' }} />
      </Box>
      <Text 
        size="sm" 
        weight="medium" 
        color="text-white" 
        truncate 
        block 
        groupHoverTextColor="performance-green"
        transition
      >
        {name}
      </Text>
      <Box display="flex" alignItems="center" justifyContent="center" gap={1}>
        {categoryLabel && (
          <Text size="xs" color={categoryColor}>{categoryLabel}</Text>
        )}
        {skillLevelLabel && (
          <Text size="xs" color={skillLevelColor}>{skillLevelLabel}</Text>
        )}
      </Box>
    </Box>
  );
}