import { cn } from "@/lib/utils";
import { AlertTriangle, CheckCircle2, AlertOctagon } from "lucide-react";
import type { Severity } from "@/lib/electrical";

const CONFIG: Record<
  Severity,
  { label: string; className: string; icon: typeof AlertTriangle }
> = {
  ok: {
    label: "Normal",
    className: "bg-success/10 text-success border-success/30",
    icon: CheckCircle2,
  },
  warning: {
    label: "Warning",
    className: "bg-warning/15 text-warning-foreground border-warning/40",
    icon: AlertTriangle,
  },
  critical: {
    label: "Critical",
    className: "bg-destructive/10 text-destructive border-destructive/30",
    icon: AlertOctagon,
  },
};

export function SeverityBadge({
  severity,
  className,
  showIcon = true,
}: {
  severity: Severity;
  className?: string;
  showIcon?: boolean;
}) {
  const c = CONFIG[severity];
  const Icon = c.icon;
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-semibold",
        c.className,
        className,
      )}
    >
      {showIcon && <Icon className="h-3.5 w-3.5" />}
      {c.label}
    </span>
  );
}