Advanced Form Fields

"use client"

import { useForm } from "react-hook-form"
import { useHookFormMask } from "use-mask-input"
import { useFormFields } from "@omergulcicek/forms"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"

export default function PaymentForm() {
  const form = useForm()
  const registerWithMask = useHookFormMask(form.register)

  const { cardNumber, expiryDate, cvv, phone } = useFormFields({
    fields: [
      { name: "cardNumber", type: "cardNumber" },
      { name: "expiryDate", type: "expiryDate" },
      { name: "cvv", type: "cvv" },
      { name: "phone", type: "phone" }
    ],
    registerWithMask,
    form
  })

  const handleSubmit = (data: Record<string, unknown>) => {
    console.log("Form Data:", data)
  }

  return (
    <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
      <div>
        <Label>Card Number</Label>
        <Input {...cardNumber} placeholder="**** **** **** ****" />
      </div>
      
      <div className="grid grid-cols-2 gap-4">
        <div>
          <Label>Expiry</Label>
          <Input {...expiryDate} placeholder="MM/YY" />
        </div>
        <div>
          <Label>CVV</Label>
          <Input {...cvv} placeholder="***" />
        </div>
      </div>
      
      <div>
        <Label>Phone</Label>
        <Input {...phone} placeholder="(5xx) xxx xx xx" />
      </div>

      <Button type="submit">Submit</Button>
    </form>
  )
}