Plotter Trace

import { LoaderPlotterTrace } from '@/components/ui/loader-plotter-trace'

'use client'

import { useEffect, useState } from 'react'
import { useReducedMotion } from 'motion/react'
import { LoaderPlotterTrace } from '@/components/ui/loader-plotter-trace'

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

  useEffect(() => {
    if (reduced) {
      setProgress(64)
      return
    }
    const start = performance.now()
    let raf = 0
    const tick = (now: number) => {
      const t = Math.min(1, (now - start) / 9000)
      const eased = 1 - Math.pow(1 - t, 2.2)
      setProgress(8 + eased * 92)
      if (t < 1) raf = requestAnimationFrame(tick)
    }
    raf = requestAnimationFrame(tick)
    return () => cancelAnimationFrame(raf)
  }, [reduced])

  return (
    <div className="mx-auto flex w-full max-w-5xl flex-col gap-10 px-4 py-10 sm:px-6">
      <div className="overflow-hidden rounded-2xl border border-border/60">
        <LoaderPlotterTrace
          progress={progress}
          plateLabel="PLATE 07, ASSEMBLY"
          label="Drafting assembly"
          seed={7}
        />
      </div>
      <div className="overflow-hidden rounded-2xl border border-border/60">
        <LoaderPlotterTrace
          plateLabel="PLATE 12, FEED LOOP"
          label="Plotting continuously"
          seed={12}
          speed={1.1}
        />
      </div>
    </div>
  )
}