// src/v2/components/ui/Spinner.jsx
// Animated SVG spinner. Used by Button (loading state), DataTable, and any async UI.
//
// Props:
//   size     — 'sm' | 'md' | 'lg'  (default: 'md')
//   className — extra Tailwind layout classes (e.g. 'mx-auto')

export default function Spinner({ size = 'md', className = '' }) {
  const px = { sm: 14, md: 20, lg: 28 }[size] ?? 20

  return (
    <svg
      width={px}
      height={px}
      viewBox="0 0 24 24"
      fill="none"
      className={`animate-spin shrink-0 ${className}`}
      aria-hidden="true"
      role="presentation"
    >
      {/* Faint full circle — the track */}
      <circle
        cx="12" cy="12" r="10"
        stroke="currentColor"
        strokeWidth="2.5"
        strokeOpacity="0.2"
      />
      {/* Bright arc — the moving head */}
      <path
        d="M12 2a10 10 0 0 1 10 10"
        stroke="currentColor"
        strokeWidth="2.5"
        strokeLinecap="round"
      />
    </svg>
  )
}
