Plan Approval Card

import * as React from 'react'
import PlanApprovalCard, { type PlanApprovalStep } from '@/components/ui/plan-approval-card'

const initialSteps: PlanApprovalStep[] = [
  { id: 'gather', label: 'Gather relevant information from trusted sources.' },
  { id: 'verify', label: 'Review key details and verify the available information.' },
  { id: 'themes', label: 'Identify common themes and highlight useful insights.' },
  { id: 'outline', label: 'Organize the findings into a clear outline.' },
  { id: 'summary', label: 'Create a concise summary with links to sources.' },
]

const duration = 12

export default function Demo() {
  const [steps, setSteps] = React.useState(initialSteps)
  const [seconds, setSeconds] = React.useState(9)
  const [paused, setPaused] = React.useState(false)
  const [status, setStatus] = React.useState('')

  React.useEffect(() => {
    if (paused) return
    const timer = setTimeout(() => {
      if (seconds > 0) return setSeconds((value) => value - 1)
      setStatus('Starting research…')
      setTimeout(() => {
        setStatus('')
        setSeconds(duration)
      }, 2200)
    }, 1000)
    return () => clearTimeout(timer)
  }, [paused, seconds])

  return (
    <div className="flex w-full max-w-lg flex-col items-center gap-3">
      <PlanApprovalCard
        className="w-full"
        countdownDuration={duration}
        countdownSeconds={paused || status ? undefined : seconds}
        disabled={Boolean(status)}
        onCancel={() => {
          setPaused(true)
          setStatus('Plan cancelled.')
        }}
        onEdit={() => setPaused(true)}
        onStart={() => setStatus('Starting research…')}
        onStepsChange={setSteps}
        steps={steps}
        title="Research a topic"
      />
      <output aria-live="polite" className="min-h-5 text-xs leading-5 text-muted-foreground">
        {status}
      </output>
    </div>
  )
}