import type { HTMLAttributes, ReactNode } from 'react';
import { cx } from '../../utils/cx';
import './Badge.css';

export type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
export type BadgeVariant = 'subtle' | 'solid' | 'outline';

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  /** Semantic color. Match the meaning, not the look. */
  tone?: BadgeTone;
  variant?: BadgeVariant;
  size?: 'sm' | 'md';
  /** Renders a small filled dot before the label. */
  dot?: boolean;
  children?: ReactNode;
}

/** Compact status or category label. Not interactive. */
export function Badge({
  tone = 'neutral',
  variant = 'subtle',
  size = 'md',
  dot = false,
  className,
  children,
  ...rest
}: BadgeProps) {
  return (
    <span
      {...rest}
      className={cx(
        'ds-badge',
        `ds-badge--${tone}`,
        `ds-badge--${variant}`,
        `ds-badge--${size}`,
        className,
      )}
    >
      {dot && <span className="ds-badge__dot" aria-hidden="true" />}
      {children}
    </span>
  );
}