import { Box } from '@/ui/Box';
import { Image } from '@/ui/Image';
import { TableCell, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';

export interface TeamLadderRowProps {
  rank: number;
  teamId: string;
  teamName: string;
  logoUrl: string;
  memberCount: number;
  teamRating: number | null;
  totalWins: number;
  totalRaces: number;
  onClick: () => void;
}

export function TeamLadderRow({
  rank,
  teamName,
  logoUrl,
  memberCount,
  teamRating,
  totalWins,
  totalRaces,
  onClick,
}: TeamLadderRowProps) {
  return (
    <TableRow
      onClick={onClick}
      clickable
    >
      <TableCell>
        <Text size="sm" color="text-gray-300" weight="semibold">#{rank}</Text>
      </TableCell>
      <TableCell>
        <Box display="flex" alignItems="center" gap={3}>
          <Box w="8" h="8" rounded="md" overflow="hidden" bg="bg-deep-graphite" flexShrink={0}>
            <Image
              src={logoUrl}
              alt={teamName}
              width={32}
              height={32}
              objectFit="cover"
            />
          </Box>
          <Box display="flex" flexDirection="col">
            <Text size="sm" weight="semibold" color="text-white" truncate block>
              {teamName}
            </Text>
          </Box>
        </Box>
      </TableCell>
      <TableCell>
        <Text color="text-primary-blue" weight="semibold">
          {teamRating !== null ? Math.round(teamRating) : '—'}
        </Text>
      </TableCell>
      <TableCell>
        <Text color="text-performance-green" weight="semibold">{totalWins}</Text>
      </TableCell>
      <TableCell>
        <Text color="text-white">{totalRaces}</Text>
      </TableCell>
      <TableCell>
        <Text color="text-gray-300">
          {memberCount} {memberCount === 1 ? 'member' : 'members'}
        </Text>
      </TableCell>
    </TableRow>
  );
}