import { getMediaUrl } from '@/lib/utilities/media';
import { Avatar } from '@/ui/Avatar';
import { Text } from '@/ui/Text';
import { Group } from '@/ui/Group';
import { RankBadge } from './RankBadge';
import { LeaderboardRow } from '@/ui/LeaderboardRow';
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 (
    <LeaderboardRow
      onClick={onClick}
      rank={<RankBadge rank={rank} />}
      identity={
        <Group gap={4}>
          <Avatar 
            src={logoUrl || getMediaUrl('team-logo', id)} 
            alt={name} 
            size="md"
          />
          <Group direction="column" align="start" gap={0}>
            <Text 
              weight="bold" 
              variant="high" 
              block 
              truncate
            >
              {name}
            </Text>
            <Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider">
              {memberCount} Members
            </Text>
          </Group>
        </Group>
      }
      stats={
        <Group gap={8}>
          <Group direction="column" align="end" gap={0}>
            <Text variant="low" font="mono" weight="bold" block size="md">
              {races}
            </Text>
            <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold">
              Races
            </Text>
          </Group>
          <Group direction="column" align="end" gap={0}>
            <Text variant="primary" font="mono" weight="bold" block size="md">
              {rating}
            </Text>
            <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold">
              Rating
            </Text>
          </Group>
          <Group direction="column" align="end" gap={0}>
            <Text variant="success" font="mono" weight="bold" block size="md">
              {wins}
            </Text>
            <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold">
              Wins
            </Text>
          </Group>
        </Group>
      }
    />
  );
}