"use client"

import * as React from "react"
import { FormDialog } from "@/registry/ui/form-dialog"
import { Button } from "@/registry/ui/button"
import { Input } from "@/registry/ui/input"

export default function FormDialogDemo() {
  const [open, setOpen] = React.useState(false)
  const [submitting, setSubmitting] = React.useState(false)

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setSubmitting(true)
    // Simulate an async save
    setTimeout(() => {
      setSubmitting(false)
      setOpen(false)
    }, 1200)
  }

  return (
    <div className="flex items-center justify-center">
      <Button variant="outline" onClick={() => setOpen(true)}>
        Edit profile
      </Button>
      <FormDialog
        open={open}
        onOpenChange={setOpen}
        title="Edit profile"
        description="Update your details and save the changes."
        onSubmit={handleSubmit}
        submitting={submitting}
      >
        <div className="flex flex-col gap-2">
          <label htmlFor="name" className="text-footnote font-medium">
            Name
          </label>
          <Input id="name" name="name" defaultValue="Ada Lovelace" />
        </div>
        <div className="flex flex-col gap-2">
          <label htmlFor="email" className="text-footnote font-medium">
            Email
          </label>
          <Input id="email" name="email" type="email" defaultValue="ada@example.com" />
        </div>
      </FormDialog>
    </div>
  )
}