import { BusyRing } from './BusyRing';

export type StatusPillTone = 'ok' | 'warning' | 'error' | 'checking' | 'muted';

export interface StatusPillProps {
  tone?: StatusPillTone;
  children: string;
}

export function StatusPill({ tone = 'muted', children }: StatusPillProps) {
  return (
    <span
      className={`ui-status-pill ui-status-pill--${tone}`}
      aria-busy={tone === 'checking' || undefined}
    >
      {tone === 'checking' ? <BusyRing /> : null}
      {children}
    </span>
  );
}

