Multi-Step Form Wrapper

import { MultiStepFormWrapper, Step, useMultiStepForm } from "@/components/multi-step-form-wrapper"
import { z } from "zod"

const userSchema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
  message: z.string().min(10)
})

function StepOne() {
  const { form, updateFormData } = useMultiStepForm()
  
  return (
    <div className="space-y-4">
      <input {...form.register("name")} placeholder="Name" />
      <input {...form.register("email")} placeholder="Email" />
    </div>
  )
}

function StepTwo() {
  const { form } = useMultiStepForm()
  
  return (
    <textarea {...form.register("message")} placeholder="Message" />
  )
}

export default function MyForm() {
  const handleComplete = (data) => {
    console.log('Form completed:', data)
  }

  return (
    <MultiStepFormWrapper
      schema={userSchema}
      onComplete={handleComplete}
      showProgressBar
      autoSave
      persistKey="user-form"
    >
      <Step title="Personal Info" description="Tell us about yourself">
        <StepOne />
      </Step>
      <Step title="Your Message" description="What would you like to say?">
        <StepTwo />
      </Step>
    </MultiStepFormWrapper>
  )
}