import { HorizontalStatCard } from '@/ui/HorizontalStatCard';
import { Text } from '@/ui/Text';
import { Grid } from '@/ui/Grid';

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 (
    <Grid cols={3} gap={4}>
      <HorizontalStatCard
        label="Championship Leader"
        value={drivers.find(d => d.id === leader?.driverId)?.name || 'N/A'}
        subValue={`${leader?.totalPoints || 0} points`}
        icon={<Text size="2xl">🏆</Text>}
        iconBgColor="rgba(250, 204, 21, 0.1)"
      />

      <HorizontalStatCard
        label="Races Completed"
        value={totalRaces}
        subValue="Season in progress"
        icon={<Text size="2xl">🏁</Text>}
        iconBgColor="rgba(59, 130, 246, 0.1)"
      />

      <HorizontalStatCard
        label="Active Drivers"
        value={standings.length}
        subValue="Competing for points"
        icon={<Text size="2xl">👥</Text>}
        iconBgColor="rgba(16, 185, 129, 0.1)"
      />
    </Grid>
  );
}