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

import { MedalFormatter } from '@/lib/formatters/MedalFormatter';
import { RatingFormatter } from '@/lib/formatters/RatingFormatter';
import { Image } from '@/ui/Image';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

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

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

export function LeaderboardPodium({ podium, onDriverClick }: LeaderboardPodiumProps) {
  // Order: 2nd, 1st, 3rd
  const displayOrder = [1, 0, 2];
  
  return (
    <Stack mb={12}>
      <Stack display="flex" alignItems="end" justifyContent="center" gap={4} maxWidth="4xl" mx="auto">
        {displayOrder.map((index) => {
          const driver = podium[index];
          if (!driver) return <Stack key={index} flexGrow={1} />;
          
          const position = index + 1;
          const isFirst = position === 1;
          
          const config = {
            1: { height: '48', scale: '1.1', zIndex: 10, shadow: 'shadow-warning-amber/20' },
            2: { height: '36', scale: '1', zIndex: 0, shadow: 'shadow-white/5' },
            3: { height: '28', scale: '0.9', zIndex: 0, shadow: 'shadow-white/5' },
          }[position as 1 | 2 | 3];

          return (
            <Stack
              key={driver.id}
              as="button"
              type="button"
              onClick={() => onDriverClick?.(driver.id)}
              display="flex"
              flexDirection="col"
              alignItems="center"
              flexGrow={1}
              transition
              hoverScale
              group
              shadow={config.shadow}
              zIndex={config.zIndex}
            >
              <Stack position="relative" mb={4} transform={`scale(${config.scale})`}>
                <Stack 
                  position="relative" 
                  w={isFirst ? '32' : '24'} 
                  h={isFirst ? '32' : '24'} 
                  rounded="full" 
                  overflow="hidden" 
                  border 
                  borderColor={isFirst ? 'border-warning-amber' : 'border-charcoal-outline'}
                  borderWidth="3px"
                  transition
                  groupHoverBorderColor="primary-blue"
                  shadow="xl"
                >
                  <Image
                    src={driver.avatarUrl}
                    alt={driver.name}
                    width={128}
                    height={128}
                    fullWidth
                    fullHeight
                    objectFit="cover"
                  />
                </Stack>
                <Stack 
                  position="absolute" 
                  bottom="-2" 
                  left="50%" 
                  w="10" 
                  h="10" 
                  rounded="full" 
                  display="flex" 
                  alignItems="center" 
                  justifyContent="center" 
                  border 
                  transform="translateX(-50%)"
                  borderWidth="2px"
                  bg={MedalFormatter.getBg(position)}
                  color={MedalFormatter.getColor(position)}
                  shadow="lg"
                >
                  <Text size="sm" weight="bold">{position}</Text>
                </Stack>
              </Stack>

              <Text 
                weight="bold" 
                color="text-white" 
                size={isFirst ? 'lg' : 'base'} 
                mb={1} 
                block 
                truncate
                align="center"
                px={2}
                maxWidth="full"
                groupHoverTextColor="text-primary-blue"
                transition
              >
                {driver.name}
              </Text>

              <Text 
                font="mono" 
                weight="bold" 
                size={isFirst ? 'xl' : 'lg'} 
                block 
                color={isFirst ? 'text-warning-amber' : 'text-primary-blue'}
              >
                {RatingFormatter.format(driver.rating)}
              </Text>

              <Stack direction="row" align="center" gap={3} mt={1}>
                <Stack direction="row" align="center" gap={1}>
                  <Text size="xs" color="text-gray-500" weight="bold" uppercase letterSpacing="wider">Wins</Text>
                  <Text size="xs" weight="bold" color="text-performance-green">{driver.wins}</Text>
                </Stack>
                <Stack w="1" h="1" rounded="full" bg="bg-gray-700" />
                <Stack direction="row" align="center" gap={1}>
                  <Text size="xs" color="text-gray-500" weight="bold" uppercase letterSpacing="wider">Podiums</Text>
                  <Text size="xs" weight="bold" color="text-white">{driver.podiums}</Text>
                </Stack>
              </Stack>

              <Stack 
                mt={6} 
                w="full" 
                h={config.height}
                rounded="lg"
                border
                borderColor="border-charcoal-outline/50"
                bg="bg-deep-charcoal/40"
                display="flex"
                alignItems="center"
                justifyContent="center"
                blur="sm"
                groupHoverBorderColor="primary-blue/30"
                transition
              >
                <Text 
                  weight="bold" 
                  size="4xl" 
                  color={MedalFormatter.getColor(position)}
                  opacity={0.1}
                  fontSize={isFirst ? '5rem' : '3.5rem'}
                >
                  {position}
                </Text>
              </Stack>
            </Stack>
          );
        })}
      </Stack>
    </Stack>
  );
}