/**
 * Spinner Component - ProRank SEO
 *
 * Uses inline SVG animation so it does not depend on missing utility classes.
 */

import React from 'react';

const sizes = {
  sm: 16,
  md: 20,
  lg: 24,
  xl: 32,
};

const Spinner = ({ size = 'md', className = '', style = {} }) => {
  const pixelSize = sizes[size] || sizes.md;

  return (
    <svg
      aria-hidden="true"
      className={className}
      viewBox="0 0 24 24"
      style={{
        width: pixelSize,
        height: pixelSize,
        display: 'inline-block',
        verticalAlign: 'middle',
        ...style,
      }}
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle
        cx="12"
        cy="12"
        r="10"
        fill="none"
        stroke="currentColor"
        strokeOpacity="0.25"
        strokeWidth="4"
      />
      <path
        fill="currentColor"
        fillOpacity="0.75"
        d="M12 2a10 10 0 0 1 10 10h-4a6 6 0 0 0-6-6V2Z"
      >
        <animateTransform
          attributeName="transform"
          attributeType="XML"
          dur="0.75s"
          from="0 12 12"
          repeatCount="indefinite"
          to="360 12 12"
          type="rotate"
        />
      </path>
    </svg>
  );
};

export default Spinner;