import { RankMedal } from '@/ui/RankMedal';
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) {
  if (rank <= 3) {
    return <RankMedal rank={rank} size={size} />;
  }

  return (
    <Group justify="center" align="center">
      <Text size={size === 'lg' ? 'md' : 'xs'} weight="bold" variant="low">
        #{rank}
      </Text>
    </Group>
  );
}