import { Stack } from '@/ui/Stack';
import { StandingsItem } from './StandingsItem';

interface Standing {
  leagueId: string;
  leagueName: string;
  position: number;
  points: number;
  wins: number;
  racesCompleted: number;
}

interface StandingsListProps {
  standings: Standing[];
}

export function StandingsList({ standings }: StandingsListProps) {
  return (
    <Stack gap={4}>
      {standings.map((standing) => (
        <StandingsItem
          key={standing.leagueId}
          leagueName={standing.leagueName}
          position={standing.position}
          points={standing.points}
          wins={standing.wins}
          racesCompleted={standing.racesCompleted}
        />
      ))}
    </Stack>
  );
}