import React from 'react';
import { Table, TableBody, TableHead, TableHeader, TableRow } from '@/ui/Table';
import { RankingRow } from './RankingRow';
import { LeaderboardTableShell } from '@/ui/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) {
  const columns = [
    { key: 'rank', label: 'Rank', width: '8rem' },
    { key: 'driver', label: 'Driver' },
    { key: 'races', label: 'Races', align: 'center' as const },
    { key: 'rating', label: 'Rating', align: 'center' as const },
    { key: 'wins', label: 'Wins', align: 'center' as const },
  ];

  return (
    <LeaderboardTableShell columns={columns}>
      {drivers.map((driver) => (
        <RankingRow
          key={driver.id}
          {...driver}
          onClick={() => onDriverClick?.(driver.id)}
        />
      ))}
    </LeaderboardTableShell>
  );
}