'use client';

import { DriverIdentity } from '@/ui/DriverIdentity';
import { ProfileCard } from '@/ui/ProfileCard';
import { Badge } from '@/ui/Badge';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Flag, Trophy, Medal } from 'lucide-react';

interface DriverCardProps {
  driver: {
    id: string;
    name: string;
    avatarUrl?: string;
    rating: number;
    ratingLabel: string;
    nationality: string;
    racesCompleted: number;
    wins: number;
    podiums: number;
    rank: number;
  };
  onClick: (id: string) => void;
}

export function DriverCard({ driver, onClick }: DriverCardProps) {
  return (
    <ProfileCard
      data-testid="driver-card"
      onClick={() => onClick(driver.id)}
      variant="muted"
      identity={
        <DriverIdentity
          data-testid="driver-identity"
          driver={{
            id: driver.id,
            name: driver.name,
            avatarUrl: driver.avatarUrl || null,
          }}
          contextLabel={`Rank #${driver.rank}`}
          meta={driver.nationality}
        />
      }
      actions={
        <Badge data-testid="driver-rating" variant="outline" size="sm">
          {driver.ratingLabel}
        </Badge>
      }
      stats={
        <Grid cols={3} gap="px" style={{ backgroundColor: 'var(--ui-color-border-muted)', border: '1px solid var(--ui-color-border-muted)', borderRadius: 'var(--ui-radius-md)', overflow: 'hidden' }}>
          <Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
            <Text size="xs" variant="low" uppercase block mono>Races</Text>
            <Text size="sm" weight="bold" mono variant="high">{driver.racesCompleted}</Text>
          </Stack>
          <Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
            <Text size="xs" variant="low" uppercase block mono>Wins</Text>
            <Text size="sm" weight="bold" mono variant="primary">{driver.wins}</Text>
          </Stack>
          <Stack padding={2} align="center" style={{ backgroundColor: 'var(--ui-color-bg-surface)' }}>
            <Text size="xs" variant="low" uppercase block mono>Podiums</Text>
            <Text size="sm" weight="bold" mono variant="warning">{driver.podiums}</Text>
          </Stack>
        </Grid>
      }
    />
  );
}