"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const badge = cva(
  "inline-flex items-center gap-1 rounded-pill border px-2 py-0.5 " +
    "text-caption font-medium whitespace-nowrap",
  {
    variants: {
      tone: {
        neutral: "border-edge text-dim",
        accent: "border-accent-line bg-accent-soft text-accent",
        ok: "border-ok/40 bg-ok/10 text-ok",
        warn: "border-warn/40 bg-warn/10 text-warn",
        err: "border-err/40 bg-err/10 text-err",
      },
    },
    defaultVariants: { tone: "neutral" },
  },
);

export function Badge({
  className,
  tone,
  ...props
}: React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badge>) {
  return <span className={cn(badge({ tone }), className)} {...props} />;
}