Progress Button

import { ButtonProgress } from '@/components/ui/button-progress'

'use client'

import { useCallback, useEffect, useRef, useState } from 'react'
import { ButtonProgress } from '@/components/ui/button-progress'

export default function ButtonProgressDemo() {
  const [deployState, setDeployState] = useState<'idle' | 'working' | 'success'>('idle')
  const [exportState, setExportState] = useState<'idle' | 'working' | 'success'>('idle')
  const [exportProgress, setExportProgress] = useState(0)
  const timers = useRef<ReturnType<typeof setTimeout>[]>([])

  const clearTimers = useCallback(() => {
    timers.current.forEach(clearTimeout)
    timers.current = []
  }, [])

  useEffect(() => () => clearTimers(), [clearTimers])

  const runDeploy = () => {
    if (deployState !== 'idle') return
    clearTimers()
    setDeployState('working')
    timers.current.push(
      setTimeout(() => setDeployState('success'), 2400),
      setTimeout(() => setDeployState('idle'), 4200)
    )
  }

  const runExport = () => {
    if (exportState !== 'idle') return
    clearTimers()
    setExportState('working')
    setExportProgress(0)
    const steps = [0.18, 0.42, 0.67, 0.88, 1]
    steps.forEach((p, i) => {
      timers.current.push(
        setTimeout(() => {
          setExportProgress(p)
          if (p === 1) {
            setExportState('success')
            timers.current.push(setTimeout(() => {
              setExportState('idle')
              setExportProgress(0)
            }, 1600))
          }
        }, 400 + i * 450)
      )
    })
  }

  return (
    <div className="mx-auto flex min-h-[380px] max-w-lg flex-col items-center justify-center gap-12 px-6 py-16">
      <div className="flex w-full flex-col items-center gap-3 text-center">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Harbor · production
        </p>
        <p className="max-w-sm text-sm leading-relaxed text-muted-foreground">
          Push build <span className="font-medium text-foreground">v2.14.3</span> to the
          edge fleet, 12 regions, zero-downtime rollout.
        </p>
        <ButtonProgress
          state={deployState}
          onClick={runDeploy}
          workingLabel="Deploying…"
          successLabel="Live"
        >
          Deploy to production
        </ButtonProgress>
      </div>

      <div className="flex w-full flex-col items-center gap-3 border-t border-border/60 pt-10 text-center">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Audit export · determinate
        </p>
        <p className="max-w-sm text-sm leading-relaxed text-muted-foreground">
          Compile the last 90 days of access logs into a signed CSV package.
        </p>
        <ButtonProgress
          state={exportState}
          progress={exportState === 'idle' ? undefined : exportProgress}
          onClick={runExport}
          workingLabel="Packaging…"
          successLabel="Downloaded"
        >
          Export access logs
        </ButtonProgress>
      </div>
    </div>
  )
}