import type { HTMLAttributes, ReactNode } from "react";

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

const TONE: Record<Tone, string> = {
  neutral: "bg-surface-2 text-muted-foreground border border-border",
  accent: "bg-accent-subtle text-accent border border-accent-ring/60",
  success: "bg-success-subtle text-success border border-green-200",
  warning: "bg-warning-subtle text-warning border border-amber-200",
  danger: "bg-danger-subtle text-danger border border-red-200",
  info: "bg-info-subtle text-info border border-cyan-200",
};

export function Badge({
  tone = "neutral",
  children,
  className = "",
  ...rest
}: HTMLAttributes<HTMLSpanElement> & { tone?: Tone; children: ReactNode }) {
  return (
    <span
      {...rest}
      className={[
        "inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-[11px] font-medium",
        TONE[tone],
        className,
      ].join(" ")}
    >
      {children}
    </span>
  );
}