"use client";

import { cn } from "@/lib/utils";
import { TIER_LABELS } from "@/lib/constants";

// Tier colors matching skeptic/constants.ts
const tierColors: Record<number, string> = {
  0: "bg-emerald-500/20 text-emerald-700 dark:text-emerald-300 border-emerald-500/30",
  1: "bg-blue-500/20 text-blue-700 dark:text-blue-300 border-blue-500/30",
  2: "bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border-cyan-500/30",
  3: "bg-amber-500/20 text-amber-700 dark:text-amber-300 border-amber-500/30",
  4: "bg-orange-500/20 text-orange-700 dark:text-orange-300 border-orange-500/30",
  5: "bg-red-500/20 text-red-700 dark:text-red-300 border-red-500/30",
};

interface TierBadgeProps {
  tier: number;
  tierLabel?: string;
  size?: "sm" | "xs";
}

export function TierBadge({ tier, tierLabel, size = "sm" }: TierBadgeProps) {
  const safeTier = tier >= 0 && tier <= 5 ? tier : 5;
  const label = tierLabel ?? TIER_LABELS[safeTier] ?? "Unknown";

  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 rounded border font-medium",
        tierColors[safeTier],
        size === "sm" ? "px-1.5 py-0.5 text-xs" : "px-1 py-0.5 text-[10px]"
      )}
      title={label}
    >
      <span className="font-mono font-semibold">T{safeTier}</span>
      <span className="hidden sm:inline text-muted-foreground">{label}</span>
    </span>
  );
}
