'use client';

import { LeaderboardTableShell } from '@/ui/LeaderboardTableShell';
import { LeaderboardList } from '@/ui/LeaderboardList';
import { RankingRow } from '@/components/leaderboards/RankingRow';
import { useRouter } from 'next/navigation';
import { routes } from '@/lib/routing/RouteConfig';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';

interface StandingEntry {
  position: number;
  driverName: string;
  driverId?: string; // Added to support navigation
  teamName?: string;
  points: number;
  wins: number;
  podiums: number;
  races: number;
  avgFinish: number | null;
  gap: string;
}

interface LeagueStandingsTableProps {
  standings: StandingEntry[];
}

export function LeagueStandingsTable({ standings }: LeagueStandingsTableProps) {
  const router = useRouter();

  if (!standings || standings.length === 0) {
    return (
      <Box p={12} textAlign="center" border borderColor="zinc-800" bg="zinc-900/30">
        <Text color="text-zinc-500" italic>No standings data available for this season.</Text>
      </Box>
    );
  }

  return (
    <LeaderboardTableShell>
      <LeaderboardList>
        {standings.map((entry) => (
          <RankingRow
            key={entry.driverId || entry.driverName}
            id={entry.driverId || ''}
            rank={entry.position}
            name={entry.driverName}
            avatarUrl="" // Not provided in StandingEntry
            nationality="INT"
            skillLevel="pro"
            racesCompleted={entry.races}
            rating={0}
            wins={entry.wins}
            onClick={entry.driverId ? () => router.push(routes.driver.detail(entry.driverId!)) : undefined}
          />
        ))}
      </LeaderboardList>
    </LeaderboardTableShell>
  );
}