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

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

export function ActiveDriverCard({
  name,
  avatarUrl,
  categoryLabel,
  skillLevelLabel,
  onClick,
}: ActiveDriverCardProps) {
  return (
    <Surface
      as="button"
      onClick={onClick}
      variant="muted"
      rounded="xl"
      padding={3}
      style={{ border: '1px solid var(--ui-color-border-default)', textAlign: 'center', cursor: 'pointer' }}
    >
      <Box position="relative" width={12} height={12} marginX="auto" marginBottom={2}>
        <Box fullWidth fullHeight rounded="full" style={{ overflow: 'hidden', border: '1px solid var(--ui-color-border-default)' }}>
          <Image src={avatarUrl} alt={name} objectFit="cover" />
        </Box>
        <Box 
          position="absolute" 
          bottom={0} 
          right={0} 
          width={3} 
          height={3} 
          rounded="full" 
          bg="var(--ui-color-intent-success)" 
          style={{ border: '2px solid var(--ui-color-bg-surface)' }} 
        />
      </Box>
      <Text 
        size="sm" 
        weight="medium" 
        variant="high" 
        truncate 
        block 
      >
        {name}
      </Text>
      <Box display="flex" alignItems="center" justifyContent="center" gap={1}>
        {categoryLabel && (
          <Text size="xs" variant="primary">{categoryLabel}</Text>
        )}
        {skillLevelLabel && (
          <Text size="xs" variant="telemetry">{skillLevelLabel}</Text>
        )}
      </Box>
    </Surface>
  );
}