Form

import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormDescription,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { useState } from "react"

function MyForm() {
  const [username, setUsername] = useState("")
  const [errors, setErrors] = useState<Record<string, string[]>>({})

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const newErrors: Record<string, string[]> = {}
    
    if (!username || username.length < 3) {
      newErrors.username = ["Username must be at least 3 characters"]
    }

    setErrors(newErrors)
    if (Object.keys(newErrors).length === 0) {
    }
  }

  return (
    <Form onSubmit={handleSubmit} errors={errors}>
      <FormField
        name="username"
        value={username}
        onChange={(value) => setUsername(value as string)}
      >
        {({ field, error }) => (
          <FormItem>
            <FormLabel>Username</FormLabel>
            <Input {...field} />
            <FormDescription>
              This is your public display name.
            </FormDescription>
            <FormMessage>{error}</FormMessage>
          </FormItem>
        )}
      </FormField>
      <Button type="submit">Submit</Button>
    </Form>
  )
}