import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';
import { Icon } from '@/ui/Icon';
import { Box } from '@/ui/primitives/Box';
import { Text } from '@/ui/Text';
import { Crown, Medal } from 'lucide-react';

interface RankMedalProps {
  rank: number;
  size?: 'sm' | 'md' | 'lg';
  showIcon?: boolean;
}

export function RankMedal({ rank, size = 'md', showIcon = true }: RankMedalProps) {
  const isTop3 = rank <= 3;
  
  const sizeMap = {
    sm: '7',
    md: '8',
    lg: '10',
  };

  const textSizeMap = {
    sm: 'xs',
    md: 'xs',
    lg: 'sm',
  } as const;

  const iconSize = {
    sm: 3,
    md: 3.5,
    lg: 4.5,
  };

  return (
    <Box 
      display="flex" 
      alignItems="center" 
      justifyContent="center" 
      rounded="full" 
      border 
      h={sizeMap[size]}
      w={sizeMap[size]}
      bg={MedalDisplay.getBg(rank)}
      color={MedalDisplay.getColor(rank)}
    >
      {isTop3 && showIcon ? (
        <Icon icon={rank === 1 ? Crown : Medal} size={iconSize[size]} />
      ) : (
        <Text weight="bold" size={textSizeMap[size]}>{rank}</Text>
      )}
    </Box>
  );
}