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

export type BadgeTone = "neutral" | "brand" | "success" | "danger" | "warning";

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

export function Badge({ tone = "neutral", className = "", children, ...rest }: Props) {
  return (
    <span className={`hb-badge hb-badge--${tone} ${className}`.trim()} {...rest}>
      {children}
    </span>
  );
}
