import React from 'react';
import { RankingRow } from './RankingRow';
import { LeaderboardList } from '@/ui/LeaderboardList';
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) {
  return (
    <LeaderboardTableShell>
      <LeaderboardList>
        {drivers.map((driver) => (
          <RankingRow
            key={driver.id}
            {...driver}
            onClick={() => onDriverClick?.(driver.id)}
          />
        ))}
      </LeaderboardList>
    </LeaderboardTableShell>
  );
}