// src/components/keywords/intent-badge.tsx
import type { SearchIntent } from "@/lib/keywords/types";
import { cn } from "@/lib/utils";

export const INTENT_LABELS: Record<SearchIntent, string> = {
  informational: "Info",
  commercial: "Comm",
  transactional: "Transac",
  navigational: "Navig",
  local: "Local",
};

/** Full French labels for menus/pickers; the compact INTENT_LABELS are for the
 *  inline table badges. */
export const INTENT_FULL_LABELS: Record<SearchIntent, string> = {
  informational: "Informationnel",
  commercial: "Commercial",
  transactional: "Transactionnel",
  navigational: "Navigationnel",
  local: "Local",
};

/** Small tinted chips (design ELEVA-79): Info indigo, Navig violet,
 *  Transac green, Comm amber, Local cyan (rose lisait comme un red flag). */
const STYLES: Record<SearchIntent, string> = {
  informational: "bg-indigo-500/12 text-indigo-600 dark:text-indigo-300",
  navigational: "bg-violet-500/12 text-violet-600 dark:text-violet-300",
  transactional: "bg-emerald-500/12 text-emerald-600 dark:text-emerald-300",
  commercial: "bg-amber-500/12 text-amber-600 dark:text-amber-300",
  local: "bg-cyan-500/12 text-cyan-600 dark:text-cyan-300",
};

const TITLES: Record<SearchIntent, string> = {
  informational: "Informational",
  commercial: "Commercial",
  transactional: "Transactional",
  navigational: "Navigational",
  local: "Local",
};

export function IntentBadges({ intents }: { intents: SearchIntent[] }) {
  if (intents.length === 0)
    return <span className="text-muted-foreground/50">—</span>;
  return (
    <div className="flex flex-wrap items-center gap-1">
      {intents.map((i) => (
        <span
          key={i}
          title={TITLES[i]}
          className={cn(
            "inline-flex h-[21px] items-center whitespace-nowrap rounded-md px-2 font-medium text-[11px]",
            STYLES[i],
          )}
        >
          {INTENT_LABELS[i]}
        </span>
      ))}
    </div>
  );
}