import React from 'react';
import { Crown } from 'lucide-react';
import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';

interface MedalBadgeProps {
  position: number;
}

export function MedalBadge({ position }: MedalBadgeProps) {
  const getMedalColor = (pos: number) => {
    switch (pos) {
      case 1: return 'var(--warning-amber)';
      case 2: return 'var(--iron-gray)';
      case 3: return 'var(--amber-600)';
      default: return 'var(--charcoal-outline)';
    }
  };

  const isMedal = position <= 3;

  return (
    <Box 
      display="flex" 
      h="10" 
      w="10" 
      alignItems="center" 
      justifyContent="center" 
      rounded="full" 
      bg={isMedal ? 'bg-gradient-to-br from-yellow-400/20 to-amber-600/10' : 'bg-iron-gray'}
    >
      {isMedal ? (
        <Icon icon={Crown} size={5} color={getMedalColor(position)} />
      ) : (
        <Text size="lg" weight="bold" color="text-gray-400">#{position}</Text>
      )}
    </Box>
  );
}