'use client';

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

export default 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 (
    <span className={`inline-flex items-center gap-1.5 rounded font-medium border ${getRankColor(rank)} ${sizeClasses[size]}`}>
      {medal && <span>{medal}</span>}
      {showLabel && <span>#{rank}</span>}
      {!showLabel && !medal && <span>#{rank}</span>}
    </span>
  );
}