import React from 'react';
import { Table, TableBody, TableHead, TableHeader, TableRow } from '@/ui/Table';
import { RankingRow } from './RankingRow';
import { LeaderboardTableShell } from './LeaderboardTableShell';

interface LeaderboardDriver {
  id: string;
  name: string;
  avatarUrl: string;
  rank: number;
  rankDelta?: number;
  nationality: string;
  skillLevel: string;
  racesCompleted: number;
  rating: number;
  wins: number;
}

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

export function LeaderboardTable({ drivers, onDriverClick }: LeaderboardTableProps) {
  return (
    <LeaderboardTableShell isEmpty={drivers.length === 0} emptyMessage="No drivers found">
      <Table>
        <TableHead>
          <TableRow>
            <TableHeader w="32">Rank</TableHeader>
            <TableHeader>Driver</TableHeader>
            <TableHeader textAlign="center">Races</TableHeader>
            <TableHeader textAlign="center">Rating</TableHeader>
            <TableHeader textAlign="center">Wins</TableHeader>
          </TableRow>
        </TableHead>
        <TableBody>
          {drivers.map((driver) => (
            <RankingRow
              key={driver.id}
              {...driver}
              onClick={() => onDriverClick?.(driver.id)}
            />
          ))}
        </TableBody>
      </Table>
    </LeaderboardTableShell>
  );
}