'use client';

import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/primitives/Stack';
import { TrendingUp } from 'lucide-react';
import React from 'react';

interface DriverTableProps {
  children: React.ReactNode;
}

export function DriverTable({ children }: DriverTableProps) {
  return (
    <Stack gap={4}>
      <Stack direction="row" align="center" gap={3}>
        <Stack display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="xl" bg="bg-primary-blue/10" border borderColor="border-primary-blue/20">
          <TrendingUp size={20} color="#198CFF" />
        </Stack>
        <Stack>
          <Heading level={2}>Driver Rankings</Heading>
          <Text size="xs" color="text-gray-500">Top performers by skill rating</Text>
        </Stack>
      </Stack>

      <Stack overflow="hidden" rounded="xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal/50">
        <Stack as="table" w="full" textAlign="left">
          <Stack as="thead">
            <Stack as="tr" borderBottom borderColor="border-charcoal-outline" bg="bg-deep-charcoal/80">
              <Stack as="th" px={6} py={4} fontSize="xs" color="text-gray-500" textAlign="center" width="60px">#</Stack>
              <Stack as="th" px={6} py={4} fontSize="xs" color="text-gray-500">Driver</Stack>
              <Stack as="th" px={6} py={4} fontSize="xs" color="text-gray-500" width="150px">Nationality</Stack>
              <Stack as="th" px={6} py={4} fontSize="xs" color="text-gray-500" textAlign="right" width="100px">Rating</Stack>
              <Stack as="th" px={6} py={4} fontSize="xs" color="text-gray-500" textAlign="right" width="80px">Wins</Stack>
            </Stack>
          </Stack>
          <Stack as="tbody">
            {children}
          </Stack>
        </Stack>
      </Stack>
    </Stack>
  );
}