import { cn } from "@/lib/cn";
import { STATUS_HINTS, STATUS_LABELS, type DisplayStatus } from "@/lib/status";

export const STATUS_STYLES: Record<DisplayStatus, { badge: string; dot: string; row: string }> = {
  WORKING: { badge: "border-emerald-200 bg-emerald-50 text-emerald-800", dot: "bg-emerald-500", row: "hover:bg-slate-50/60" },
  SLOW: { badge: "border-amber-200 bg-amber-50 text-amber-800", dot: "bg-amber-500", row: "bg-amber-50/50 hover:bg-amber-50/80" },
  NOT_WORKING: { badge: "border-red-200 bg-red-50 text-red-800", dot: "bg-red-500", row: "bg-red-50/40 hover:bg-red-50/70" },
  DISABLED: { badge: "border-slate-200 bg-slate-100 text-slate-600", dot: "bg-slate-400", row: "hover:bg-slate-50/60" },
  PENDING: { badge: "border-slate-200 bg-white text-slate-500", dot: "border border-slate-400 bg-white", row: "hover:bg-slate-50/60" },
};

// Colour is never the only signal: the label is always rendered.
export function StatusBadge({ status, className }: { status: DisplayStatus; className?: string }) {
  const style = STATUS_STYLES[status];
  return (
    <span
      title={STATUS_HINTS[status]}
      className={cn(
        "inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap",
        style.badge,
        className,
      )}
    >
      <span className={cn("size-1.5 rounded-full", style.dot)} aria-hidden />
      {STATUS_LABELS[status]}
    </span>
  );
}