"use client"

import * as React from "react"
import { Loader2Icon } from "lucide-react"

import { cn } from "cn"

/** `motion.delay.loading` (T8, approved 20 Oct 2026): a spinner or skeleton stays invisible this long, so a fast response never flickers. */
export const LOADING_DELAY_MS = 300

/** True once `motion.delay.loading` has passed since mount. */
export function useLoadingDelay(ms = LOADING_DELAY_MS) {
  const [shown, setShown] = React.useState(ms <= 0)
  React.useEffect(() => {
    if (ms <= 0) return
    const t = setTimeout(() => setShown(true), ms)
    return () => clearTimeout(t)
  }, [ms])
  return shown
}

/** In-place spinner for a short action (loading spec 8). Hidden, but keeping its size, for the first `motion.delay.loading`. */
function Spinner({ className, delay = LOADING_DELAY_MS, ...props }: React.ComponentProps<"svg"> & { delay?: number }) {
  const shown = useLoadingDelay(delay)
  return (
    <Loader2Icon data-slot="spinner" role="status" aria-label="Loading" className={cn("size-4 animate-spin", !shown && "invisible", className)} {...props} />
  )
}

export { Spinner }