import React from "react";

/**
 * Indeterminate ring spinner.
 */
export function Spinner({ size = 18, tone = "accent", stroke = 2.4, style = {} }) {
  const c = { accent: "var(--action-primary)", muted: "var(--text-disabled)", ok: "var(--status-ok)" }[tone] || "var(--action-primary)";
  return (
    <span style={{ display: "inline-flex", ...style }}>
      <style>{`@keyframes ctv-spin{to{transform:rotate(360deg)}}`}</style>
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ animation: "ctv-spin 0.7s linear infinite" }}>
        <circle cx="12" cy="12" r="9" stroke={c} strokeOpacity="0.2" strokeWidth={stroke} />
        <path d="M21 12a9 9 0 0 0-9-9" stroke={c} strokeWidth={stroke} strokeLinecap="round" />
      </svg>
    </span>
  );
}