'use client';

import { DriverIdentity } from '@/ui/DriverIdentity';
import { ProfileCard } from '@/ui/ProfileCard';
import { StatGrid } from '@/ui/StatGrid';
import { Badge } from '@/ui/Badge';
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) {
  const stats = [
    { label: 'Races', value: driver.racesCompleted, intent: 'low', icon: Flag },
    { label: 'Wins', value: driver.wins, intent: 'primary', icon: Trophy },
    { label: 'Podiums', value: driver.podiums, intent: 'warning', icon: Medal },
  ];

  return (
    <ProfileCard
      onClick={() => onClick(driver.id)}
      variant="muted"
      identity={
        <DriverIdentity
          driver={{
            id: driver.id,
            name: driver.name,
            avatarUrl: driver.avatarUrl || null,
          }}
          contextLabel={`Rank #${driver.rank}`}
          meta={driver.nationality}
        />
      }
      actions={
        <Badge variant="outline" size="sm">
          {driver.ratingLabel}
        </Badge>
      }
      stats={
        <StatGrid
          stats={stats.map(s => ({
            label: s.label,
            value: s.value,
            intent: s.intent as any,
            icon: s.icon
          }))}
          columns={3}
          variant="box"
        />
      }
    />
  );
}