'use client';

import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Table, TableHead, TableBody, TableRow, TableHeaderCell } from '@/ui/Table';
import { TrendingUp } from 'lucide-react';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { Stack } from '@/ui/Stack';
import React from 'react';

interface DriverTableProps {
  children: React.ReactNode;
}

export function DriverTable({ children }: DriverTableProps) {
  return (
    <Stack direction="col" gap="md">
      <Box display="flex" alignItems="center" gap={3}>
        <Surface variant="precision" rounded="md" padding="sm">
          <Icon icon={TrendingUp} size={5} intent="primary" />
        </Surface>
        <Stack direction="col" gap="none">
          <Heading level={2} weight="bold">Driver Rankings</Heading>
          <Text size="xs" variant="low">Performance metrics based on sanctioned race results</Text>
        </Stack>
      </Box>

      <Table>
        <TableHead>
          <TableRow>
            <TableHeaderCell textAlign="center" w="60px">Rank</TableHeaderCell>
            <TableHeaderCell>Competitor</TableHeaderCell>
            <TableHeaderCell w="180px">Nationality</TableHeaderCell>
            <TableHeaderCell textAlign="right" w="120px">Skill Rating</TableHeaderCell>
            <TableHeaderCell textAlign="right" w="100px">Victories</TableHeaderCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {children}
        </TableBody>
      </Table>
    </Stack>
  );
}