/**
 * @factory/ui — Spinner (pure CSS, token colors). `role="status"` + optional
 * accessible label; no JS animation dependency.
 */
import * as React from "react";
import { clsx } from "clsx";

export interface SpinnerProps {
  size?: "sm" | "md" | "lg";
  /** Accessible label ("Loading…"); without it the spinner is decorative. */
  label?: string;
  className?: string;
}

const SIZE: Record<NonNullable<SpinnerProps["size"]>, string> = {
  sm: "h-4 w-4 border-2",
  md: "h-6 w-6 border-2",
  lg: "h-8 w-8 border-[3px]",
};

export function Spinner({ size = "md", label, className }: SpinnerProps) {
  return (
    <span
      role={label ? "status" : undefined}
      aria-label={label}
      aria-hidden={label ? undefined : true}
      className={clsx(
        "inline-block animate-spin rounded-full border-current border-t-transparent",
        "text-muted-foreground",
        SIZE[size],
        className,
      )}
    />
  );
}