import { Group } from '@/ui/Group';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { RankingRow } from './RankingRow';
import { EmptyState } from '@/ui/EmptyState';
import { Trophy } from 'lucide-react';

interface Driver {
  id: string;
  name: string;
  avatarUrl: string;
  rank: number;
  nationality: string;
  skillLevel: string;
  racesCompleted: number;
  rating: number;
  wins: number;
  medalBg?: string;
  medalColor?: string;
}

interface RankingsTableProps {
  drivers: Driver[];
  onDriverClick?: (id: string) => void;
}

export function RankingsTable({ drivers, onDriverClick }: RankingsTableProps) {
  if (drivers.length === 0) {
    return (
      <EmptyState
        title="No drivers found"
        description="There are no drivers in the system yet"
        icon={Trophy}
      />
    );
  }

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableHeader className="text-center w-16">Rank</TableHeader>
          <TableHeader>Driver</TableHeader>
          <TableHeader className="text-center">Races</TableHeader>
          <TableHeader className="text-center">Rating</TableHeader>
          <TableHeader className="text-center">Wins</TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        {drivers.map((driver) => (
          <RankingRow
            key={driver.id}
            {...driver}
            onClick={() => onDriverClick?.(driver.id)}
          />
        ))}
      </TableBody>
    </Table>
  );
}