"use client";

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

interface VerdictBadgeProps {
  verdict: string;
  className?: string;
  size?: "sm" | "xs";
}

const verdictConfig: Record<string, { color: string; icon: string }> = {
  deprecated: {
    color: "bg-red-500/20 text-red-700 dark:text-red-300",
    icon: "⚠",
  },
  recommended: {
    color: "bg-emerald-500/20 text-emerald-700 dark:text-emerald-300",
    icon: "✓",
  },
  emerging: {
    color: "bg-blue-500/20 text-blue-700 dark:text-blue-300",
    icon: "●",
  },
  common: {
    color: "bg-slate-500/20 text-slate-700 dark:text-slate-300",
    icon: "○",
  },
  noise: {
    color: "bg-amber-500/20 text-amber-700 dark:text-amber-300",
    icon: "~",
  },
};

export function VerdictBadge({ verdict, className, size = "xs" }: VerdictBadgeProps) {
  const config = verdictConfig[verdict.toLowerCase()] || {
    color: "bg-slate-500/20 text-slate-700 dark:text-slate-300",
    icon: "○",
  };

  const sizeClass = size === "xs" ? "text-[10px] px-1.5 py-0.5" : "text-xs px-2.5 py-0.5";
  const iconSize = size === "xs" ? "text-[8px]" : "text-[10px]";

  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 rounded font-medium",
        config.color,
        sizeClass,
        className
      )}
    >
      <span className={iconSize}>{config.icon}</span>
      {verdict}
    </span>
  );
}
