import { Badge } from "./Badge";

export function RocketIndicator({ score, tier, emoji, className }) {
  if (!score && score !== 0) return null;

  const getColor = () => {
    if (score >= 90) return "text-green-500";
    if (score >= 75) return "text-blue-500";
    if (score >= 60) return "text-yellow-500";
    if (score >= 40) return "text-orange-500";
    return "text-gray-500";
  };

  return (
    <div className={`flex items-center gap-2 ${className}`}>
      <span className={`text-xl font-bold ${getColor()}`}>
        {score}
      </span>
      {emoji && (
        <span className="text-lg" title={`Tier: ${tier}`}>
          {emoji}
        </span>
      )}
    </div>
  );
}

