import { Loader2 } from "lucide-react";
import { cn } from "../../lib/utils";

/**
 * Our own busy indicator - replacement for `@wordpress/components`' `Spinner`.
 *
 * IT EXISTS BECAUSE OF WHERE IT IS USED FIRST, not because of a component inventory. The first-run
 * organization form and the founding-admin signup are the ONE place a practice has no other impression of
 * us to go on: everywhere else a rough edge is read against a product they have already decided works -
 * here it *is* the product. A WordPress admin spinner on that screen is the customer's entire first sense
 * of what they bought.
 *
 * Lucide + Tailwind on the SEMANTIC tokens, matching the three places that already spin this way
 * (CareAccess, ShowFieldHistoryToggle, SnapshotChart). No `@wordpress/*` import: this renders in
 * wp-admin AND on akashic.health, and a WordPress component is meaningless in the second.
 *
 * `aria-hidden` with a `role="status"` wrapper is deliberate: a spinning icon announced by name is
 * noise, but a busy region with no accessible name is invisible. The label is visually hidden, not absent.
 */
export const Spinner = ({
  className,
  label = "Loading",
}: {
  className?: string;
  label?: string;
}) => (
  <span role="status" className="inline-flex items-center">
    <Loader2
      aria-hidden="true"
      className={cn("size-4 animate-spin text-muted-foreground", className)}
    />
    <span className="sr-only">{label}</span>
  </span>
);

export default Spinner;