import { getMediaUrl } from '@/lib/utilities/media';
import { Image } from '@/ui/Image';
import { TableCell, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { RankMedal } from './RankMedal';
import React from 'react';

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}
    >
      <TableCell>
        <Box width="2rem" display="flex" justifyContent="center">
          <RankMedal rank={rank} size="md" />
        </Box>
      </TableCell>

      <TableCell>
        <Group gap={3}>
          <Surface 
            position="relative" 
            width="2.5rem" 
            height="2.5rem" 
            rounded="md" 
            overflow="hidden" 
            border 
            variant="muted"
          >
            <Image 
              src={logoUrl || getMediaUrl('team-logo', id)} 
              alt={name} 
              width={40} 
              height={40} 
              objectFit="cover" 
            />
          </Surface>
          <Stack gap={0} flex={1} minWidth="0">
            <Text 
              weight="semibold" 
              variant="high" 
              block 
              truncate
            >
              {name}
            </Text>
            <Text size="xs" variant="low" block>
              {memberCount} Members
            </Text>
          </Stack>
        </Group>
      </TableCell>

      <TableCell textAlign="center">
        <Text font="mono" weight="bold" variant="primary">
          {rating}
        </Text>
      </TableCell>

      <TableCell textAlign="center">
        <Text font="mono" weight="bold" variant="success">
          {wins}
        </Text>
      </TableCell>

      <TableCell textAlign="center">
        <Text variant="low" font="mono">{races}</Text>
      </TableCell>
    </TableRow>
  );
}