gridpilot.gg/apps/website/components/leaderboards/RankingRow.tsx

import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
import { SkillLevelFormatter } from '@/lib/formatters/SkillLevelFormatter';
import { Avatar } from '@/ui/Avatar';
import { Group } from '@/ui/Group';
import { LeaderboardRow } from '@/ui/LeaderboardRow';
import { Text } from '@/ui/Text';
import { DeltaChip } from './DeltaChip';
import { RankBadge } from './RankBadge';

interface RankingRowProps {
  id: string;
  rank: number;
  rankDelta?: number;
  name: string;
  avatarUrl: string;
  nationality: string;
  skillLevel: string;
  racesCompleted: number;
  rating: number;
  wins: number;
  onClick?: () => void;
  droppedRaceIds?: string[];
}

export function RankingRow({
  id,
  rank,
  rankDelta,
  name,
  avatarUrl,
  nationality,
  skillLevel,
  racesCompleted,
  rating,
  wins,
  onClick,
  droppedRaceIds,
}: RankingRowProps) {
  return (
    <LeaderboardRow
      onClick={onClick}
      rank={
        <Group gap={4} data-testid={`standing-position-${rank}`}>
          <RankBadge rank={rank} />
          {rankDelta !== undefined && (
            <DeltaChip value={rankDelta} type="rank" />
          )}
        </Group>
      }
      identity={
        <Group gap={4} data-testid={`standing-driver-${id}`}>
          <Avatar
            src={avatarUrl}
            alt={name}
            size="md"
          />
          <Group direction="column" align="start" gap={0}>
            <Text
              weight="bold"
              variant="high"
              block
              truncate
              data-testid="driver-name"
            >
              {name}
            </Text>
            <Group gap={2}>
              <Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider">{nationality}</Text>
              <Text size="xs" weight="bold" style={{ color: SkillLevelFormatter.getColor(skillLevel) }} uppercase letterSpacing="wider">
                {SkillLevelFormatter.getLabel(skillLevel)}
              </Text>
            </Group>
          </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">
              {racesCompleted}
            </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">
              {RatingFormatter.format(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>
          {droppedRaceIds && droppedRaceIds.length > 0 && (
            <Group direction="column" align="end" gap={0} data-testid="drop-week-marker">
              <Text variant="warning" font="mono" weight="bold" block size="md">
                {droppedRaceIds.length}
              </Text>
              <Text size="xs" variant="low" block uppercase letterSpacing="widest" weight="bold">
                Dropped
              </Text>
            </Group>
          )}
        </Group>
      }
    />
  );
}