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

type Tone = "neutral" | "accent" | "success" | "warning" | "danger" | "muted";

const tones: Record<Tone, string> = {
  neutral: "bg-stone-900/[0.04] text-text border-border",
  accent: "bg-accent/10 text-accent border-accent/40",
  success: "bg-success/10 text-success border-success/25",
  warning: "bg-warning/10 text-warning border-warning/25",
  danger: "bg-danger/10 text-danger border-danger/25",
  muted: "bg-stone-900/[0.03] text-text-dim border-border",
};

export function Badge({
  children,
  tone = "neutral",
  dot = false,
  className,
}: {
  children: React.ReactNode;
  tone?: Tone;
  dot?: boolean;
  className?: string;
}) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-micro font-semibold uppercase tracking-wider",
        tones[tone],
        className,
      )}
    >
      {dot && (
        <span
          className={cn(
            "size-1.5 rounded-full",
            // audit minimalist-skill : retire animate-pulse + glow trop forts
            // (signal "live SaaS dashboard" anti-editorial). On garde un glow tres
            // discret a 25% sur accent et danger sans animation.
            tone === "accent" && "bg-accent shadow-[0_0_4px_rgba(146,64,14,0.25)]",
            tone === "success" && "bg-success",
            tone === "warning" && "bg-warning",
            tone === "danger" && "bg-danger",
            tone === "neutral" && "bg-text-muted",
            tone === "muted" && "bg-text-faint",
          )}
        />
      )}
      {children}
    </span>
  );
}