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

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

type Props = HTMLAttributes<HTMLSpanElement> & { tone?: Tone; children: ReactNode };

const tones: Record<Tone, string> = {
  neutral: "border-zinc-700/60 bg-zinc-800/60 text-zinc-300",
  accent: "border-accent-500/20 bg-accent-500/10 text-accent-300",
  success: "border-emerald-500/20 bg-emerald-500/10 text-emerald-300",
  warning: "border-amber-500/20 bg-amber-500/10 text-amber-200",
  danger: "border-red-500/20 bg-red-500/10 text-red-300",
};

export function Badge({ tone = "neutral", className = "", children, ...rest }: Props) {
  return (
    <span
      className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium ${tones[tone]} ${className}`}
      {...rest}
    >
      {children}
    </span>
  );
}