import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';

interface RankBadgeProps {
  rank: number;
  size?: 'sm' | 'md' | 'lg';
  showLabel?: boolean;
}

export function RankBadge({ rank, size = 'md', showLabel = true }: RankBadgeProps) {
  const getMedalEmoji = (rank: number) => {
    switch (rank) {
      case 1: return '🥇';
      case 2: return '🥈';
      case 3: return '🥉';
      default: return null;
    }
  };

  const medal = getMedalEmoji(rank);

  const sizeClasses = {
    sm: 'text-sm px-2 py-1',
    md: 'text-base px-3 py-1.5',
    lg: 'text-lg px-4 py-2'
  };

  const getRankColor = (rank: number) => {
    if (rank <= 3) return 'bg-warning-amber/20 text-warning-amber border-warning-amber/30';
    if (rank <= 10) return 'bg-primary-blue/20 text-primary-blue border-primary-blue/30';
    if (rank <= 50) return 'bg-purple-500/20 text-purple-400 border-purple-500/30';
    return 'bg-charcoal-outline/20 text-gray-300 border-charcoal-outline';
  };

  return (
    <Box 
      as="span" 
      display="inline-flex" 
      alignItems="center" 
      gap={1.5} 
      rounded="md" 
      border 
      className={`font-medium ${getRankColor(rank)} ${sizeClasses[size]}`}
    >
      {medal && <Text>{medal}</Text>}
      {showLabel && <Text>#{rank}</Text>}
      {!showLabel && !medal && <Text>#{rank}</Text>}
    </Box>
  );
}