import type { CSSProperties } from "react";
export function Spinner({
  size = 14,
  tone = "accent",
  label = "Loading",
  className = "",
  style,
}: {
  size?: number;
  tone?: "accent" | "paper" | "muted";
  label?: string;
  className?: string;
  style?: CSSProperties;
}) {
  return (
    <span
      role="status"
      aria-label={label}
      className={`mizu-spinner ${className}`}
      style={{ display: "inline-flex", ...style }}
    >
      <span
        aria-hidden="true"
        style={{ width: size, height: size, background: `var(--mizu-${tone})` }}
      />
    </span>
  );
}