import { Icon } from './Icon';
import { Text } from './Text';
import { Surface } from './Surface';
import { Crown, Medal } from 'lucide-react';
import React from 'react';

export interface RankMedalProps {
  rank: number;
  size?: 'sm' | 'md' | 'lg';
  showIcon?: boolean;
  variant?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'default';
  bg?: string;
  color?: string;
}

/**
 * RankMedal is a semantic UI component for displaying a rank with a medal icon or number.
 * It follows the "Modern Precision" theme.
 */
export const RankMedal = ({ 
  rank, 
  size = 'md', 
  showIcon = true,
  variant,
  bg,
  color
}: RankMedalProps) => {
  const isTop3 = rank <= 3;
  
  const sizePx = {
    sm: '1.75rem',
    md: '2rem',
    lg: '2.5rem',
  };

  const textSizeMap = {
    sm: 'xs',
    md: 'xs',
    lg: 'sm',
  } as const;

  const iconSize = {
    sm: 3,
    md: 3.5,
    lg: 4.5,
  };

  return (
    <Surface 
      variant="muted"
      rounded="full"
      style={{ 
        height: sizePx[size],
        width: sizePx[size],
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        border: '1px solid var(--ui-color-border-default)',
        backgroundColor: bg,
        color: color
      }}
    >
      {isTop3 && showIcon ? (
        <Icon icon={rank === 1 ? Crown : Medal} size={iconSize[size] as any} intent={variant as any} />
      ) : (
        <Text weight="bold" size={textSizeMap[size]} variant={variant as any}>{rank}</Text>
      )}
    </Surface>
  );
};