'use client';

import React from 'react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Grid } from '@/ui/Grid';
import { Surface } from '@/ui/Surface';

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}>
      <Card>
        <Stack direction="row" align="center" gap={3}>
          <Surface variant="muted" rounded="full" padding={3} style={{ backgroundColor: 'rgba(250, 204, 21, 0.1)' }}>
            <Text size="2xl">🏆</Text>
          </Surface>
          <Box>
            <Text size="xs" color="text-gray-400" block mb={1}>Championship Leader</Text>
            <Text weight="bold" color="text-white" block>{drivers.find(d => d.id === leader?.driverId)?.name || 'N/A'}</Text>
            <Text size="sm" color="text-warning-amber" weight="medium">{leader?.totalPoints || 0} points</Text>
          </Box>
        </Stack>
      </Card>

      <Card>
        <Stack direction="row" align="center" gap={3}>
          <Surface variant="muted" rounded="full" padding={3} style={{ backgroundColor: 'rgba(59, 130, 246, 0.1)' }}>
            <Text size="2xl">🏁</Text>
          </Surface>
          <Box>
            <Text size="xs" color="text-gray-400" block mb={1}>Races Completed</Text>
            <Text size="2xl" weight="bold" color="text-white" block>{totalRaces}</Text>
            <Text size="sm" color="text-gray-400">Season in progress</Text>
          </Box>
        </Stack>
      </Card>

      <Card>
        <Stack direction="row" align="center" gap={3}>
          <Surface variant="muted" rounded="full" padding={3} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)' }}>
            <Text size="2xl">👥</Text>
          </Surface>
          <Box>
            <Text size="xs" color="text-gray-400" block mb={1}>Active Drivers</Text>
            <Text size="2xl" weight="bold" color="text-white" block>{standings.length}</Text>
            <Text size="sm" color="text-gray-400">Competing for points</Text>
          </Box>
        </Stack>
      </Card>
    </Grid>
  );
}