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

import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
import { Avatar } from '@/ui/Avatar';
import { Group } from '@/ui/Group';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';

interface PodiumDriver {
  id: string;
  name: string;
  avatarUrl: string;
  rating: number;
  wins: number;
  podiums: number;
}

interface RankingsPodiumProps {
  podium: PodiumDriver[];
  onDriverClick?: (id: string) => void;
}

export function RankingsPodium({ podium }: RankingsPodiumProps) {
  return (
    <Group justify="center" align="end" gap={4}>
      {[1, 0, 2].map((index) => {
        const driver = podium[index];
        if (!driver) return null;
        
        const position = index === 1 ? 1 : index === 0 ? 2 : 3;
        const isFirst = position === 1;
        
        const config = {
          1: { height: '10rem', variant: 'precision' },
          2: { height: '8rem', variant: 'muted' },
          3: { height: '6rem', variant: 'muted' },
        }[position as 1 | 2 | 3];

        return (
          <Group
            key={driver.id}
            direction="column"
            align="center"
            gap={4}
            data-testid={`standing-driver-${driver.id}`}
          >
            <Group direction="column" align="center" gap={2}>
              <Group
                justify="center"
                align="center"
              >
                <Avatar
                  src={driver.avatarUrl}
                  alt={driver.name}
                  size={isFirst ? 'lg' : 'md'}
                />
              </Group>
              
              <Text weight="bold" variant="high" size={isFirst ? 'md' : 'sm'} data-testid="driver-name">{driver.name}</Text>
              <Group direction="column" align="center" gap={0} data-testid="standing-stats">
                <Text font="mono" weight="bold" variant={isFirst ? 'warning' : 'primary'} data-testid="stat-rating">
                  {RatingFormatter.format(driver.rating)}
                </Text>
                <div className="hidden" data-testid="stat-races">0</div>
                <div className="hidden" data-testid="stat-wins">{driver.wins}</div>
              </Group>
            </Group>
            
            <Surface
              variant={config.variant as any}
              rounded="lg"
              data-testid={`standing-position-${position}`}
              style={{
                width: '6rem',
                height: config.height,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                border: '1px solid var(--ui-color-border-default)',
                borderBottom: 'none',
                borderBottomLeftRadius: 0,
                borderBottomRightRadius: 0
              }}
            >
              <Text size="3xl" weight="bold" variant="low" opacity={0.2}>
                {position}
              </Text>
            </Surface>
          </Group>
        );
      })}
    </Group>
  );
}