import React from 'react';
import { TeamRankingRow } from './TeamRankingRow';
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) {
  const columns = [
    { key: 'rank', label: 'Rank', width: '8rem' },
    { key: 'team', label: 'Team' },
    { key: 'rating', label: 'Rating', align: 'center' as const },
    { key: 'wins', label: 'Wins', align: 'center' as const },
    { key: 'races', label: 'Races', align: 'center' as const },
  ];

  return (
    <LeaderboardTableShell columns={columns}>
      {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)}
        />
      ))}
    </LeaderboardTableShell>
  );
}