import type { HTMLAttributes } from "react";
import { cn } from "@/lib/utils";

export function Badge({
  className,
  tone = "neutral",
  ...props
}: HTMLAttributes<HTMLSpanElement> & { tone?: "neutral" | "success" | "warning" | "danger" | "info" }) {
  return (
    <span
      className={cn(
        "inline-flex items-center rounded-full px-2.5 py-1 text-xs font-bold",
        {
          "bg-[#eef1f0] text-[#43514d]": tone === "neutral",
          "bg-[#e2f3e9] text-[#17613b]": tone === "success",
          "bg-[#fff1d6] text-[#805511]": tone === "warning",
          "bg-[#fae5e5] text-[#922f31]": tone === "danger",
          "bg-[#e1f1f2] text-[#175d62]": tone === "info"
        },
        className
      )}
      {...props}
    />
  );
}
