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

export function Badge({
  children,
  className,
  tone = "neutral",
}: HTMLAttributes<HTMLSpanElement> & { tone?: "neutral" | "accent" | "success" | "warning" | "destructive" }) {
  return (
    <span
      className={cn(
        "inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium",
        tone === "accent"
          ? "border-[var(--uhuru-border-accent)] bg-[var(--uhuru-accent-subtle)] text-[var(--uhuru-accent-strong)]"
          : tone === "success"
            ? "border-[var(--uhuru-success-border)] bg-[var(--uhuru-success-bg)] text-[var(--uhuru-success-text)]"
          : tone === "warning"
            ? "border-[var(--uhuru-warning-border)] bg-[var(--uhuru-warning-bg)] text-[var(--uhuru-warning-text)]"
            : tone === "destructive"
              ? "border-[var(--uhuru-error-border)] bg-[var(--uhuru-error-bg)] text-[var(--uhuru-error-text)]"
              : "border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-muted)] text-[var(--uhuru-text-secondary)]",
        className,
      )}
    >
      {children}
    </span>
  );
}