import type { StatusTone } from "./status";

interface StatusDotProps {
  tone: StatusTone;
  /** Accessible label describing what the dot represents. */
  label?: string;
}

/**
 * A small colored status dot. `warn` pulses (consent-pending language). When a
 * `label` is given it is an accessible image; without one (e.g. paired with a
 * visible label inside a Badge) it is decorative and hidden from assistive tech.
 */
export function StatusDot({ tone, label }: StatusDotProps) {
  return (
    <span
      className={`statusdot statusdot--${tone}`}
      role={label ? "img" : undefined}
      aria-label={label}
      aria-hidden={label ? undefined : true}
      title={label}
    />
  );
}
