import { getMediaUrl } from '@/lib/utilities/media';
import { Image } from '@/ui/Image';
import { Box } from '@/ui/primitives/Box';
import { TableCell, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { RankMedal } from './RankMedal';

interface TeamRankingRowProps {
  id: string;
  rank: number;
  name: string;
  logoUrl?: string;
  rating: number;
  wins: number;
  races: number;
  memberCount: number;
  onClick?: () => void;
}

export function TeamRankingRow({
  id,
  rank,
  name,
  logoUrl,
  rating,
  wins,
  races,
  memberCount,
  onClick,
}: TeamRankingRowProps) {
  return (
    <TableRow
      clickable={!!onClick}
      onClick={onClick}
      group
    >
      <TableCell>
        <Box w="8" display="flex" justifyContent="center">
          <RankMedal rank={rank} size="md" />
        </Box>
      </TableCell>

      <TableCell>
        <Box display="flex" alignItems="center" gap={3}>
          <Box 
            position="relative" 
            w="10" 
            h="10" 
            rounded="lg" 
            overflow="hidden" 
            border 
            borderColor="border-charcoal-outline"
            bg="bg-graphite-black/50"
            groupHoverBorderColor="purple-400/50"
            transition
          >
            <Image 
              src={logoUrl || getMediaUrl('team-logo', id)} 
              alt={name} 
              width={40} 
              height={40} 
              fullWidth
              fullHeight
              objectFit="cover" 
            />
          </Box>
          <Box minWidth="0">
            <Text 
              weight="semibold" 
              color="text-white" 
              block 
              truncate
              groupHoverTextColor="text-purple-400"
              transition
            >
              {name}
            </Text>
            <Text size="xs" color="text-gray-500" block mt={0.5}>
              {memberCount} Members
            </Text>
          </Box>
        </Box>
      </TableCell>

      <TableCell textAlign="center">
        <Text font="mono" weight="bold" color="text-purple-400">
          {rating}
        </Text>
      </TableCell>

      <TableCell textAlign="center">
        <Text font="mono" weight="bold" color="text-performance-green">
          {wins}
        </Text>
      </TableCell>

      <TableCell textAlign="center">
        <Text color="text-gray-400" font="mono">{races}</Text>
      </TableCell>
    </TableRow>
  );
}