import React from "react";
import { Loader2, CheckCircle2, XCircle, CircleSlash, type LucideIcon } from "lucide-react";

type Status = "PROVISIONING" | "BUILDING" | "RUNNING" | "FAILED" | "STOPPED" | "IGNORED";

const CONFIG: Record<Status, { label: string; icon: LucideIcon; spin?: boolean; cls: string }> = {
  PROVISIONING: { label: "Provisioning", icon: Loader2, spin: true, cls: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300" },
  BUILDING: { label: "Building", icon: Loader2, spin: true, cls: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300" },
  RUNNING: { label: "Running", icon: CheckCircle2, cls: "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300" },
  FAILED: { label: "Failed", icon: XCircle, cls: "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300" },
  STOPPED: { label: "Stopped", icon: CircleSlash, cls: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300" },
  IGNORED: { label: "Ignored", icon: CircleSlash, cls: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300" },
};

export function StatusBadge({ status, reason }: { status: Status; reason?: string | null }) {
  const cfg = CONFIG[status] || CONFIG.STOPPED;
  const Icon = cfg.icon;
  const label = status === "STOPPED" && reason ? `${cfg.label}: ${reason}` : cfg.label;
  return (
    <span className={`inline-flex max-w-56 items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${cfg.cls}`} title={label}>
      <Icon size={12} className={`shrink-0 ${cfg.spin ? "animate-spin" : ""}`} />
      <span className="truncate">{label}</span>
    </span>
  );
}
