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={
        <Group gap={4} data-testid={`standing-position-${rank}`}>
          <RankBadge rank={rank} />
        </Group>
      }
      identity={
        <Group gap={4} data-testid={`standing-team-${id}`}>
          <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
              data-testid="team-name"
            >
              {name}
            </Text>
            <Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider" data-testid="team-member-count">
              {memberCount} Members
            </Text>
          </Group>
        </Group>
      }
      stats={
        <Group gap={8} data-testid="standing-stats">
          <Group direction="column" align="end" gap={0} data-testid="stat-races">
            <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} data-testid="stat-rating">
            <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} data-testid="stat-wins">
            <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>
      }
    />
  );
}