import * as React from "react";
import { cn } from "@/lib/utils";

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

const toneClasses: Record<Tone, string> = {
  neutral: "bg-(--color-surface-2) text-(--color-ink-muted) border border-(--color-border)",
  success: "bg-(--color-success)/15 text-(--color-success)",
  warning: "bg-(--color-warning)/15 text-(--color-warning)",
  danger: "bg-(--color-danger)/15 text-(--color-danger)",
  accent: "bg-(--color-accent)/15 text-(--color-accent-light)",
};

export function Badge({ tone = "neutral", className, ...props }: React.HTMLAttributes<HTMLSpanElement> & { tone?: Tone }) {
  return (
    <span className={cn("inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium", toneClasses[tone], className)} {...props} />
  );
}