import type { CSSProperties } from 'react';
import { useEffect, useRef } from 'react';

export interface SpinnerProps {
  style?: CSSProperties;
}

export default function Spinner(props: SpinnerProps) {
  // Trick to spin the element without defining keyframes.
  const style: CSSProperties = {
    transform: 'rotate(0deg)',
    transition: 'transform 60s linear',
    ...props.style,
  };
  const ref = useRef<SVGSVGElement>(null);
  useEffect(() => {
    if (!ref.current) return;
    ref.current.style.transform = 'rotate(36000deg)';
  }, []);

  return (
    <svg
      ref={ref}
      style={style}
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
    >
      <circle
        opacity="25%"
        cx="12"
        cy="12"
        r="10"
        stroke="currentColor"
        strokeWidth="4"
      />
      <path
        opacity="75%"
        fill="currentColor"
        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
      />
    </svg>
  );
}