import { Badge } from '@/ui/Badge';
import { Text } from '@/ui/Text';
import { Group } from '@/ui/Group';
import React from 'react';

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

export function RankBadge({ rank, size = 'md' }: RankBadgeProps) {
  const badgeSize = size === 'lg' ? 'md' : size;

  const getVariant = (rank: number): 'warning' | 'primary' | 'info' | 'default' => {
    if (rank <= 3) return 'warning';
    if (rank <= 10) return 'primary';
    if (rank <= 50) return 'info';
    return 'default';
  };

  const getMedalEmoji = (rank: number) => {
    switch (rank) {
      case 1: return '🥇';
      case 2: return '🥈';
      case 3: return '🥉';
      default: return null;
    }
  };

  const medal = getMedalEmoji(rank);

  return (
    <Badge variant={getVariant(rank)} size={badgeSize}>
      <Group gap={1}>
        {medal && <Text size="xs">{medal}</Text>}
        <Text size="xs" weight="bold">#{rank}</Text>
      </Group>
    </Badge>
  );
}