import { RankBadge } from '@/components/leaderboards/RankBadge';
import { Stack } from '@/ui/Stack';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { TeamLogo } from './TeamLogo';

interface TeamLeaderboardPanelProps {
  teams: Array<{
    id: string;
    name: string;
    logoUrl?: string;
    ratingLabel: string;
    winsLabel: string;
    racesLabel: string;
    memberCountLabel: string;
  }>;
  onTeamClick: (id: string) => void;
}

export function TeamLeaderboardPanel({ teams, onTeamClick }: TeamLeaderboardPanelProps) {
  return (
    <Stack border borderColor="border-steel-grey" bg="surface-charcoal/50" overflow="hidden">
      <Table>
        <TableHead className="bg-base-graphite/50">
          <TableRow>
            <TableHeader className="w-16 text-center">Rank</TableHeader>
            <TableHeader>Team</TableHeader>
            <TableHeader className="text-center">Rating</TableHeader>
            <TableHeader className="text-center">Wins</TableHeader>
            <TableHeader className="text-center">Races</TableHeader>
            <TableHeader className="text-center">Members</TableHeader>
          </TableRow>
        </TableHead>
        <TableBody>
          {teams.map((team, index) => (
            <TableRow 
              key={team.id} 
              onClick={() => onTeamClick(team.id)} 
              clickable
              className="group hover:bg-primary-blue/5 transition-colors border-b border-border-steel-grey/30 last:border-0"
            >
              <TableCell className="text-center">
                <RankBadge rank={index + 1} />
              </TableCell>
              <TableCell>
                <Stack direction="row" align="center" gap={3}>
                  <Stack w="8" h="8" bg="base-graphite" border borderColor="border-steel-grey" display="flex" center overflow="hidden">
                    <TeamLogo teamId={team.id} alt={team.name} />
                  </Stack>
                  <Text weight="bold" size="sm" color="text-white" className="group-hover:text-primary-blue transition-colors">
                    {team.name}
                  </Text>
                </Stack>
              </TableCell>
              <TableCell className="text-center">
                <Text font="mono" weight="bold" color="text-primary-blue">{team.ratingLabel}</Text>
              </TableCell>
              <TableCell className="text-center">
                <Text font="mono" color="text-gray-300">{team.winsLabel}</Text>
              </TableCell>
              <TableCell className="text-center">
                <Text font="mono" color="text-gray-300">{team.racesLabel}</Text>
              </TableCell>
              <TableCell className="text-center">
                <Text font="mono" color="text-gray-400" size="xs">{team.memberCountLabel}</Text>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Stack>
  );
}