import React from 'react';
import { TeamRankingRow } from './TeamRankingRow';
import { LeaderboardList } from '@/ui/LeaderboardList';
import { LeaderboardTableShell } from '@/ui/LeaderboardTableShell';

interface LeaderboardTeam {
  id: string;
  name: string;
  logoUrl?: string;
  position: number;
  rating: number;
  totalWins: number;
  totalRaces: number;
  memberCount: number;
}

interface TeamLeaderboardTableProps {
  teams: LeaderboardTeam[];
  onTeamClick?: (id: string) => void;
}

export function TeamLeaderboardTable({ teams, onTeamClick }: TeamLeaderboardTableProps) {
  return (
    <LeaderboardTableShell>
      <LeaderboardList>
        {teams.map((team) => (
          <TeamRankingRow
            key={team.id}
            rank={team.position}
            id={team.id}
            name={team.name}
            logoUrl={team.logoUrl}
            rating={team.rating}
            wins={team.totalWins}
            races={team.totalRaces}
            memberCount={team.memberCount}
            onClick={() => onTeamClick?.(team.id)}
          />
        ))}
      </LeaderboardList>
    </LeaderboardTableShell>
  );
}