import React from 'react';

interface RatingBadgeProps {
  rating: number;
  size?: 'sm' | 'md' | 'lg';
  className?: string;
}

export function RatingBadge({ rating, size = 'md', className = '' }: RatingBadgeProps) {
  const getColor = (val: number) => {
    if (val >= 2500) return 'text-yellow-400 bg-yellow-400/10 border-yellow-400/20';
    if (val >= 2000) return 'text-purple-400 bg-purple-400/10 border-purple-400/20';
    if (val >= 1500) return 'text-primary-blue bg-primary-blue/10 border-primary-blue/20';
    if (val >= 1000) return 'text-performance-green bg-performance-green/10 border-performance-green/20';
    return 'text-gray-400 bg-gray-400/10 border-gray-400/20';
  };

  const sizeMap = {
    sm: 'px-1.5 py-0.5 text-[10px]',
    md: 'px-2 py-1 text-xs',
    lg: 'px-3 py-1.5 text-sm',
  };

  return (
    <div className={`inline-flex items-center justify-center font-mono font-bold rounded border ${sizeMap[size]} ${getColor(rating)} ${className}`}>
      {rating.toLocaleString()}
    </div>
  );
}