import React from 'react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';

interface PointsTableProps {
  title?: string;
  points: { position: number; points: number }[];
}

export function PointsTable({ title = 'Points Distribution', points }: PointsTableProps) {
  return (
    <Card>
      <Heading level={2} mb={4}>{title}</Heading>
      <Box overflow="auto">
        <Table>
          <TableHead>
            <TableRow>
              <TableHeader>Position</TableHeader>
              <TableHeader className="text-right">Points</TableHeader>
            </TableRow>
          </TableHead>
          <TableBody>
            {points.map(({ position, points: pts }) => (
              <TableRow
                key={position}
                className={position <= 3 ? 'bg-iron-gray/20' : ''}
              >
                <TableCell>
                  <Box display="flex" alignItems="center" gap={3}>
                    <Box 
                      w="7" 
                      h="7" 
                      rounded="full" 
                      display="flex" 
                      alignItems="center" 
                      justifyContent="center" 
                      className={`text-xs font-bold ${
                        position === 1 ? 'bg-yellow-500 text-black' :
                        position === 2 ? 'bg-gray-400 text-black' :
                        position === 3 ? 'bg-amber-600 text-white' :
                        'bg-charcoal-outline text-white'
                      }`}
                    >
                      {position}
                    </Box>
                    <Text color="text-white" weight="medium">
                      {position === 1 ? '1st' : position === 2 ? '2nd' : position === 3 ? '3rd' : `${position}th`}
                    </Text>
                  </Box>
                </TableCell>
                <TableCell className="text-right">
                  <Text color="text-white" weight="semibold" className="tabular-nums">{pts}</Text>
                  <Text color="text-gray-500" ml={1}>pts</Text>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Box>
    </Card>
  );
}