import { Avatar } from '@/ui/Avatar';
import { Group } from '@/ui/Group';
import { Text } from '@/ui/Text';
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
import { Surface } from '@/ui/Surface';
import React from 'react';

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, onDriverClick }: 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}
          >
            <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'}>{driver.name}</Text>
              <Text font="mono" weight="bold" variant={isFirst ? 'warning' : 'primary'}>
                {RatingDisplay.format(driver.rating)}
              </Text>
            </Group>
            
            <Surface 
              variant={config.variant as any}
              rounded="lg"
              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>
  );
}