"use client"
 
import { useMultiStepForm } from "@/hooks/use-multi-step-form"
 
export function Component() {
  const {
    currentStep,
    totalSteps,
    isFirstStep,
    isLastStep,
    next,
    previous,
    goTo,
    progress,
  } = useMultiStepForm({ totalSteps: 3 })
 
  return (
    <div>
      <p>
        Step {currentStep + 1} of {totalSteps}
      </p>
 
      <div>
        {currentStep === 0 && <Step1 />}
        {currentStep === 1 && <Step2 />}
        {currentStep === 2 && <Step3 />}
      </div>
 
      <div className="mt-4 flex justify-between">
        <button onClick={previous} disabled={isFirstStep}>
          Back
        </button>
        <button onClick={isLastStep ? () => alert("Submit") : next}>
          {isLastStep ? "Submit" : "Next"}
        </button>
      </div>
 
      <progress value={progress} max={1} className="mt-2 w-full" />
    </div>
  )
}