import type { HTMLAttributes } from 'react';
import { cx } from '../../utils/cx';
import './Spinner.css';

export type SpinnerSize = 'sm' | 'md' | 'lg';

export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
  size?: SpinnerSize;
  /**
   * Announced to screen readers. Pass `null` when the spinner sits inside
   * something that already announces the busy state (e.g. a loading Button).
   */
  label?: string | null;
}

export function Spinner({
  size = 'md',
  label = 'Loading',
  className,
  ...rest
}: SpinnerProps) {
  return (
    <span
      {...rest}
      className={cx('ds-spinner', `ds-spinner--${size}`, className)}
      role="status"
    >
      <span className="ds-spinner__circle" aria-hidden="true" />
      {label != null && <span className="ds-visually-hidden">{label}</span>}
    </span>
  );
}