"use client";

import { CheckCircle2, AlertTriangle, XCircle, Ban, CircleDot } from "lucide-react";
import { cn } from "@/shared/lib/utils";
import type { BillingStatus } from "@/domain/entities/billing";

/** Icon + text color per status value (label text itself comes from the API). */
const STATUS_STYLE: Record<
  string,
  { icon: React.ComponentType<{ className?: string }>; className: string }
> = {
  a_jour: { icon: CheckCircle2, className: "text-emerald-600" },
  en_retard: { icon: AlertTriangle, className: "text-amber-600" },
  impaye: { icon: XCircle, className: "text-red-600" },
  suspendu: { icon: Ban, className: "text-red-600" },
};

export function BillingStatusBadge({
  status,
  className,
}: {
  status?: BillingStatus | null;
  className?: string;
}) {
  if (!status?.label) {
    return <span className="text-muted-foreground text-sm">{"—"}</span>;
  }
  const cfg = STATUS_STYLE[status.value] ?? {
    icon: CircleDot,
    className: "text-muted-foreground",
  };
  const Icon = cfg.icon;
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 text-sm font-medium whitespace-nowrap",
        cfg.className,
        className
      )}
    >
      <Icon className="w-4 h-4 shrink-0" />
      {status.label}
    </span>
  );
}