import { Shield } from 'lucide-react';
import { getRankTier } from '@/lib/constants';
import { cn } from '@/lib/cn';

interface RankBadgeProps {
  mmr: number;
  placementDone: boolean;
  matchesPlayed?: number;
  size?: 'sm' | 'md' | 'lg';
  className?: string;
}

export function RankBadge({ mmr, placementDone, matchesPlayed, size = 'md', className }: RankBadgeProps) {
  const rank = getRankTier(mmr, placementDone);

  const sizeClasses = {
    sm: 'w-8 h-8',
    md: 'w-12 h-12',
    lg: 'w-16 h-16',
  };

  const textSizes = {
    sm: 'text-[10px]',
    md: 'text-xs',
    lg: 'text-sm',
  };

  if (!placementDone) {
    return (
      <div className={cn('flex flex-col items-center gap-1', className)}>
        <div className={cn(
          'flex items-center justify-center rounded-lg bg-gray-500/10 border border-gray-500/20',
          sizeClasses[size]
        )}>
          <Shield className={cn('text-gray-400', size === 'sm' ? 'w-4 h-4' : size === 'md' ? 'w-6 h-6' : 'w-8 h-8')} />
        </div>
        <span className={cn('text-text-muted font-medium', textSizes[size])}>
          {matchesPlayed !== undefined ? `${matchesPlayed}/10` : 'Unranked'}
        </span>
      </div>
    );
  }

  return (
    <div className={cn('flex flex-col items-center gap-1', className)}>
      <div
        className={cn(
          'flex items-center justify-center rounded-lg border',
          sizeClasses[size]
        )}
        style={{
          backgroundColor: `${rank.color}15`,
          borderColor: `${rank.color}40`,
        }}
      >
        <Shield
          className={size === 'sm' ? 'w-4 h-4' : size === 'md' ? 'w-6 h-6' : 'w-8 h-8'}
          style={{ color: rank.color }}
        />
      </div>
      <span className={cn('font-medium', textSizes[size])} style={{ color: rank.color }}>
        {rank.name}
      </span>
    </div>
  );
}
