import type { SVGAttributes } from "react";
import { cx } from "../../lib/cx";
import type { RefProp } from "../../lib/refProp";
import styles from "./Spinner.module.css";
import { useWording } from "../../lib/language";

/** The props of `Spinner`. */
export interface SpinnerProps extends SVGAttributes<SVGSVGElement>, RefProp<SVGSVGElement> {
  /** Edge length in pixels. */
  size?: number;
}

/** Restrained loading indicator; inherits the text colour of its context. */
export function Spinner({ ref, size = 14, className, ...rest }: SpinnerProps) {
  const wording = useWording();
  return (
    <svg
      ref={ref}
      className={cx(styles.spinner, className)}
      width={size}
      height={size}
      viewBox="0 0 16 16"
      fill="none"
      /* The name is a default a caller may say better; the role is what the
         element is, and stays. */
      aria-label={wording.loading}
      {...rest}
      role="status"
    >
      <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeOpacity="0.25" strokeWidth="2" />
      <path d="M14.5 8A6.5 6.5 0 0 0 8 1.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}