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>
  );
}