import React from 'react';
import Card from '@/components/ui/Card';

interface LeagueChampionshipStatsProps {
  standings: Array<{
    driverId: string;
    position: number;
    totalPoints: number;
    racesFinished: number;
  }>;
  drivers: Array<{
    id: string;
    name: string;
  }>;
}

export function LeagueChampionshipStats({ standings, drivers }: LeagueChampionshipStatsProps) {
  if (standings.length === 0) return null;

  const leader = standings[0];
  const totalRaces = Math.max(...standings.map(s => s.racesFinished), 0);

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <Card>
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 rounded-full bg-yellow-500/10 flex items-center justify-center">
            <span className="text-2xl">🏆</span>
          </div>
          <div>
            <p className="text-xs text-gray-400 mb-1">Championship Leader</p>
            <p className="font-bold text-white">{drivers.find(d => d.id === leader?.driverId)?.name || 'N/A'}</p>
            <p className="text-sm text-yellow-400 font-medium">{leader?.totalPoints || 0} points</p>
          </div>
        </div>
      </Card>

      <Card>
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 rounded-full bg-primary-blue/10 flex items-center justify-center">
            <span className="text-2xl">🏁</span>
          </div>
          <div>
            <p className="text-xs text-gray-400 mb-1">Races Completed</p>
            <p className="text-2xl font-bold text-white">{totalRaces}</p>
            <p className="text-sm text-gray-400">Season in progress</p>
          </div>
        </div>
      </Card>

      <Card>
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 rounded-full bg-performance-green/10 flex items-center justify-center">
            <span className="text-2xl">👥</span>
          </div>
          <div>
            <p className="text-xs text-gray-400 mb-1">Active Drivers</p>
            <p className="text-2xl font-bold text-white">{standings.length}</p>
            <p className="text-sm text-gray-400">Competing for points</p>
          </div>
        </div>
      </Card>
    </div>
  );
}