Spinner

import * as React from "react"
import { cn } from "cn"

/**
 * Thin-arc activity indicator. Inherits colour and size from its context.
 * Under reduced motion it slows down rather than stopping, so activity stays visible.
 */
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <svg
      viewBox="0 0 16 16"
      fill="none"
      role="status"
      aria-label="Loading"
      data-slot="spinner"
      className={cn(
        "size-4 shrink-0 animate-spin [animation-duration:700ms] motion-reduce:[animation-duration:1.6s]",
        className
      )}
      {...props}
    >
      <circle cx="8" cy="8" r="6.25" stroke="currentColor" strokeOpacity="0.2" strokeWidth="1.5" />
      <path d="M14.25 8A6.25 6.25 0 0 0 8 1.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  )
}

export { Spinner }