"use client";

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

const COLORS: Record<string, string> = {
  paid: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
  recorded: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
  active: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
  enabled: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
  healthy: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
  pending: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
  pending_review: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
  redirect_issued: "bg-sky-500/15 text-sky-700 dark:text-sky-300",
  processing: "bg-sky-500/15 text-sky-700 dark:text-sky-300",
  draft: "bg-slate-500/15 text-slate-700 dark:text-slate-300",
  failed: "bg-rose-500/15 text-rose-700 dark:text-rose-300",
  cancelled: "bg-slate-500/15 text-slate-600 dark:text-slate-400",
  expired: "bg-slate-500/15 text-slate-600 dark:text-slate-400",
  suspended: "bg-orange-500/15 text-orange-700 dark:text-orange-300",
  closed: "bg-slate-500/15 text-slate-600 dark:text-slate-400",
  disabled: "bg-slate-500/15 text-slate-600 dark:text-slate-400",
};

export function PaymentStatusChip({ status }: { status?: string | null }) {
  const key = (status || "unknown").toLowerCase();
  return (
    <span
      className={cn(
        "inline-flex rounded-md px-2 py-0.5 text-xs font-medium",
        COLORS[key] || "bg-[var(--surface-muted)] text-[var(--muted)]"
      )}
    >
      {status || "—"}
    </span>
  );
}