'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';

interface StandingEntry {
  position: number;
  driverName: string;
  teamName?: string;
  points: number;
  wins: number;
  podiums: number;
  gap: string;
}

interface LeagueStandingsTableProps {
  standings: StandingEntry[];
}

export function LeagueStandingsTable({ standings }: LeagueStandingsTableProps) {
  return (
    <Box as="section" overflow="hidden" border borderColor="zinc-800" bg="zinc-900/50">
      <Box as="table" w="full" textAlign="left">
        <Box as="thead">
          <Box as="tr" borderBottom borderColor="zinc-800" bg="zinc-900/80">
            <Box as="th" px={4} py={3} w="12">
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Pos</Text>
            </Box>
            <Box as="th" px={4} py={3}>
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Driver</Text>
            </Box>
            <Box as="th" px={4} py={3} display={{ base: 'none', md: 'table-cell' }}>
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Team</Text>
            </Box>
            <Box as="th" px={4} py={3} textAlign="center">
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Wins</Text>
            </Box>
            <Box as="th" px={4} py={3} textAlign="center">
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Podiums</Text>
            </Box>
            <Box as="th" px={4} py={3} textAlign="right">
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Points</Text>
            </Box>
            <Box as="th" px={4} py={3} textAlign="right">
              <Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest">Gap</Text>
            </Box>
          </Box>
        </Box>
        <Box as="tbody">
          {standings.map((entry) => (
            <Box as="tr" key={entry.driverName} borderBottom borderColor="zinc-800" hoverBg="zinc-800/50" transition>
              <Box as="td" px={4} py={3}>
                <Text size="sm" color="text-zinc-400" font="mono">{entry.position}</Text>
              </Box>
              <Box as="td" px={4} py={3}>
                <Text size="sm" weight="medium" color="text-zinc-200">{entry.driverName}</Text>
              </Box>
              <Box as="td" px={4} py={3} display={{ base: 'none', md: 'table-cell' }}>
                <Text size="sm" color="text-zinc-500">{entry.teamName || '—'}</Text>
              </Box>
              <Box as="td" px={4} py={3} textAlign="center">
                <Text size="sm" color="text-zinc-400">{entry.wins}</Text>
              </Box>
              <Box as="td" px={4} py={3} textAlign="center">
                <Text size="sm" color="text-zinc-400">{entry.podiums}</Text>
              </Box>
              <Box as="td" px={4} py={3} textAlign="right">
                <Text size="sm" weight="bold" color="text-white">{entry.points}</Text>
              </Box>
              <Box as="td" px={4} py={3} textAlign="right">
                <Text size="sm" color="text-zinc-500" font="mono">{entry.gap}</Text>
              </Box>
            </Box>
          ))}
        </Box>
      </Box>
    </Box>
  );
}