Percent Ring

import { LoaderPercentRing } from '@/components/ui/loader-percent-ring'

'use client'

import { useEffect, useState } from 'react'
import { useReducedMotion } from 'motion/react'
import { LoaderPercentRing } from '@/components/ui/loader-percent-ring'

export default function LoaderPercentRingDemo() {
  const reduced = useReducedMotion()
  const [progress, setProgress] = useState(0.12)

  useEffect(() => {
    if (reduced) {
      setProgress(0.47)
      return
    }
    const start = performance.now()
    let raf = 0
    const tick = (now: number) => {
      const t = Math.min(1, (now - start) / 4800)
      setProgress(0.12 + t * 0.78)
      if (t < 1) raf = requestAnimationFrame(tick)
    }
    raf = requestAnimationFrame(tick)
    return () => cancelAnimationFrame(raf)
  }, [reduced])

  return (
    <div className="mx-auto flex min-h-[360px] max-w-lg flex-col items-center justify-center gap-12 px-6 py-20">
      <div className="flex w-full max-w-sm flex-col gap-10">
        <div className="flex flex-col items-center gap-3 rounded-2xl border border-border/60 bg-card px-6 py-8">
          <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
            Determinate
          </p>
          <LoaderPercentRing
            progress={progress}
            label="Indexing archive"
            size={72}
          />
          <p className="max-w-xs text-center text-sm leading-relaxed text-muted-foreground">
            Building the searchable trial balance for the March close pack,
            1,284 journal lines.
          </p>
        </div>

        <div className="flex flex-col items-center gap-3 rounded-2xl border border-border/60 bg-card px-6 py-8">
          <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
            Indeterminate
          </p>
          <LoaderPercentRing label="Waiting on feed" size={72} />
          <p className="max-w-xs text-center text-sm leading-relaxed text-muted-foreground">
            Meridian bank feed has not published the 09:00 batch yet, holding
            the reconcile queue.
          </p>
        </div>
      </div>
    </div>
  )
}