// Adapted from Astryx Spinner (MIT). See THIRD_PARTY_NOTICES.md.
import type { ComponentProps, ReactNode } from "react";

export interface SpinnerProps extends ComponentProps<"span"> {
  size?: "sm" | "md" | "lg" | "xl";
  label?: ReactNode;
}

export function Spinner({
  size = "md",
  label,
  className = "",
  "aria-label": ariaLabel,
  ...props
}: SpinnerProps) {
  const accessibleLabel =
    ariaLabel ?? (typeof label === "string" ? label : "Loading");
  return (
    <span
      {...props}
      role="status"
      aria-label={accessibleLabel}
      data-size={size}
      className={`ynr-spinner${className ? ` ${className}` : ""}`}
    >
      <span className="ynr-spinner-ring" aria-hidden="true" />
      {label != null && <span className="ynr-spinner-label">{label}</span>}
    </span>
  );
}