"use client";

export type IntentType = "informational" | "navigational" | "commercial" | "transactional" | "mixed" | "unknown";

const CONFIG: Record<IntentType, { label: string; short: string; color: string; tip: string }> = {
  informational: { label: "Informational", short: "Info",  color: "bg-blue-50 text-blue-700 border-blue-200",     tip: "Users want to learn about this topic" },
  navigational:  { label: "Navigational",  short: "Nav",   color: "bg-green-50 text-green-700 border-green-200",   tip: "Users looking for a specific site or page" },
  commercial:    { label: "Commercial",    short: "Comm",  color: "bg-orange-50 text-orange-700 border-orange-200", tip: "Users researching options before a decision" },
  transactional: { label: "Transactional", short: "Trans", color: "bg-red-50 text-red-700 border-red-200",         tip: "Users ready to take action (buy, book, sign up)" },
  mixed:         { label: "Mixed",         short: "Mix",   color: "bg-purple-50 text-purple-700 border-purple-200", tip: "Multiple intents detected for this keyword" },
  unknown:       { label: "Unknown",       short: "—",     color: "bg-slate-50 text-slate-400 border-slate-200",    tip: "Intent not yet classified" },
};

export function IntentBadge({
  intent,
  foreignIntents = [],
  size = "sm",
}: {
  intent: IntentType;
  foreignIntents?: string[];
  size?: "sm" | "md";
}) {
  const c = CONFIG[intent] ?? CONFIG.unknown;
  if (intent === "unknown") return null;

  const sizeClass = size === "sm" ? "text-[9px] px-1.5 py-0.5" : "text-[10px] px-2 py-0.5";

  return (
    <span
      className={`inline-flex items-center gap-0.5 font-bold uppercase tracking-wider rounded border ${c.color} ${sizeClass}`}
      title={`${c.label}: ${c.tip}${foreignIntents.length > 0 ? `. Also: ${foreignIntents.join(", ")}` : ""}`}
    >
      {c.short}
      {foreignIntents.length > 0 && (
        <span className="opacity-50">+{foreignIntents.length}</span>
      )}
    </span>
  );
}
