import { Loader2Icon } from "lucide-react"

import { cn } from "@/lib/utils"

/**
 * La señal de que una acción está en vuelo, **sólo adentro de un botón o de un
 * badge**. Nunca un spinner de página entera ni encima de una tabla.
 *
 * Dos correcciones sobre lo que entrega el registro:
 *
 * 1. Venía con `role="status" aria-label="Loading"`. Eso deja la mitad de una
 *    frase en inglés dentro de un producto en español y, peor, la duplica: quien
 *    usa un lector de pantalla ya escucha el gerundio del botón —«Guardando…»—
 *    y el `aria-busy` que lo acompaña. La animación es refuerzo visual de algo
 *    que ya está dicho con palabras, así que va `aria-hidden`.
 * 2. `motion-reduce:animate-none`, que el contrato exige en todo lo que se
 *    mueve: para quien pidió menos movimiento, un anillo girando sin parar es
 *    justo lo que pidió no ver.
 *
 * Y la regla que no se puede escribir en el componente: por debajo de 300 ms no
 * se muestra nada. Un parpadeo es peor que la espera.
 */
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <Loader2Icon
      data-slot="spinner"
      aria-hidden
      className={cn("size-4 animate-spin motion-reduce:animate-none", className)}
      {...props}
    />
  )
}

export { Spinner }