import Card from '@/components/ui/Card';
import RankBadge from '@/components/drivers/RankBadge';

export interface DriverCardProps {
  id: string;
  name: string;
  rating: number;
  skillLevel: 'beginner' | 'intermediate' | 'advanced' | 'pro';
  nationality: string;
  racesCompleted: number;
  wins: number;
  podiums: number;
  rank: number;
  onClick?: () => void;
}

export default function DriverCard(props: DriverCardProps) {
  const {
    name,
    rating,
    nationality,
    racesCompleted,
    wins,
    podiums,
    rank,
    onClick,
  } = props;

  return (
    <Card
      className="hover:border-charcoal-outline/60 transition-colors cursor-pointer"
      onClick={onClick}
    >
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4 flex-1">
          <RankBadge rank={rank} size="lg" />

          <div className="w-16 h-16 rounded-full bg-primary-blue/20 flex items-center justify-center text-2xl font-bold text-white">
            {name.charAt(0)}
          </div>

          <div className="flex-1">
            <h3 className="text-xl font-semibold text-white mb-1">{name}</h3>
            <p className="text-sm text-gray-400">
              {nationality} • {racesCompleted} races
            </p>
          </div>
        </div>

        <div className="flex items-center gap-8 text-center">
          <div>
            <div className="text-2xl font-bold text-primary-blue">{rating}</div>
            <div className="text-xs text-gray-400">Rating</div>
          </div>
          <div>
            <div className="text-2xl font-bold text-green-400">{wins}</div>
            <div className="text-xs text-gray-400">Wins</div>
          </div>
          <div>
            <div className="text-2xl font-bold text-warning-amber">{podiums}</div>
            <div className="text-xs text-gray-400">Podiums</div>
          </div>
          <div>
            <div className="text-sm text-gray-400">
              {racesCompleted > 0 ? ((wins / racesCompleted) * 100).toFixed(0) : '0'}%
            </div>
            <div className="text-xs text-gray-500">Win Rate</div>
          </div>
        </div>
      </div>
    </Card>
  );
}