import type { ReactNode } from "react";

type Tone = "neutral" | "brand" | "success" | "warning" | "danger" | "info";

const TONE_CLASSES: Record<Tone, string> = {
  neutral: "bg-raised text-ink-2",
  brand:   "bg-accent/15 text-accent",
  success: "bg-raised text-ink-2",
  warning: "bg-sev-moderate/15 text-sev-moderate",
  danger:  "bg-sev-major/15 text-sev-major",
  info:    "bg-accent/15 text-accent",
};

export function Badge({ children, tone = "neutral", className }: { children: ReactNode; tone?: Tone; className?: string }) {
  return (
    <span
      className={[
        "inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full whitespace-nowrap",
        TONE_CLASSES[tone],
        className ?? "",
      ]
        .filter(Boolean)
        .join(" ")}
    >
      {children}
    </span>
  );
}