import React from 'react';
import { Image } from '@/ui/Image';
import { Text } from '@/ui/Text';
import { Card } from '@/ui/Card';
import { Stack } from '@/ui/Stack';

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 (
    <Stack
      as="button"
      {...({ type: 'button' } as any)}
      onClick={onClick}
      p={3}
      rounded="xl"
      bg="bg-iron-gray/40"
      border
      borderColor="border-charcoal-outline"
      className="transition-all hover:border-performance-green/40 group text-center"
    >
      <Stack 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 />
        <Stack position="absolute" bottom="0" right="0" w="3" h="3" rounded="full" bg="bg-performance-green" border borderColor="border-iron-gray" style={{ borderWidth: '2px' }}>{null}</Stack>
      </Stack>
      <Text 
        size="sm" 
        weight="medium" 
        color="text-white" 
        truncate 
        block 
        groupHoverTextColor="performance-green"
        transition
      >
        {name}
      </Text>
      <Stack direction="row" align="center" justify="center" gap={1}>
        {categoryLabel && (
          <Text size="xs" color={categoryColor}>{categoryLabel}</Text>
        )}
        {skillLevelLabel && (
          <Text size="xs" color={skillLevelColor}>{skillLevelLabel}</Text>
        )}
      </Stack>
    </Stack>
  );
}