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

export const STATUS_LABELS: Record<KeywordStatus, string> = {
  idea: "Idée",
  watch: "À surveiller",
  active: "Actif",
  archived: "Archivé",
};

/** Tinted dot-pill per status: Actif green, Idée amber (design ELEVA-79).
 *  Source of truth for status colors — reused by the keyword modal pill so the
 *  table badge and the modal header pill never diverge (ELEVA-86). */
export const STATUS_STYLES: Record<
  KeywordStatus,
  { pill: string; dot: string }
> = {
  active: {
    pill: "border-emerald-500/25 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300",
    dot: "bg-emerald-500",
  },
  idea: {
    pill: "border-amber-500/25 bg-amber-500/10 text-amber-600 dark:text-amber-300",
    dot: "bg-amber-500",
  },
  watch: {
    pill: "border-sky-500/25 bg-sky-500/10 text-sky-600 dark:text-sky-300",
    dot: "bg-sky-500",
  },
  archived: {
    pill: "border-border bg-muted/40 text-muted-foreground",
    dot: "bg-muted-foreground/60",
  },
};

export function StatusBadge({ status }: { status: KeywordStatus }) {
  const s = STATUS_STYLES[status];
  return (
    <span
      className={cn(
        "inline-flex h-6 items-center gap-1.5 whitespace-nowrap rounded-[7px] border pr-2.5 pl-2 font-medium text-xs",
        s.pill,
      )}
    >
      <span className={cn("size-1.5 rounded-full", s.dot)} aria-hidden />
      {STATUS_LABELS[status]}
    </span>
  );
}