Field

'use client'

import * as React from 'react'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select'
import { Field, FieldControl, FieldDescription, FieldError, FieldForm, FieldGroup, FieldLabel } from '@/components/ui/field'

const roles = [
  { value: 'designer', label: 'Designer' },
  { value: 'engineer', label: 'Engineer' },
  { value: 'product', label: 'Product manager' },
]

/** Client-side validation with no form library: Field checks each control, FieldForm checks them all on submit. */
export default function FieldFormExample() {
  const [saved, setSaved] = React.useState<string | null>(null)

  return (
    <FieldForm
      className="max-w-sm"
      onFormSubmit={values => setSaved(`Welcome aboard, ${String(values.name).trim()}!`)}
    >
      <FieldGroup>
        <Field
          name="name"
          validate={value => (String(value ?? '').trim().length < 2 ? 'Enter at least 2 characters.' : null)}
        >
          <FieldLabel>Full name</FieldLabel>
          <FieldControl required placeholder="Ada Lovelace" />
          <FieldDescription>As it should appear on your profile.</FieldDescription>
          <FieldError />
        </Field>

        <Field name="email">
          <FieldLabel>Email</FieldLabel>
          <FieldControl type="email" required placeholder="ada@example.com" />
          <FieldError match="valueMissing">Email is required.</FieldError>
          <FieldError match="typeMismatch">That doesn&apos;t look like an email address.</FieldError>
        </Field>

        <Field name="role">
          <FieldLabel nativeLabel={false} render={<div />}>
            Role
          </FieldLabel>
          <Select name="role" required>
            <SelectTrigger className="w-full">
              <SelectValue placeholder="Choose a role" />
            </SelectTrigger>
            <SelectContent>
              {roles.map(role => (
                <SelectItem key={role.value} value={role.value}>
                  {role.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <FieldError match="valueMissing">Pick the role closest to yours.</FieldError>
        </Field>

        <Field name="terms">
          <FieldLabel className="font-normal">
            <Checkbox required />
            I agree to the terms of service
          </FieldLabel>
          <FieldError match="valueMissing">You need to accept the terms to continue.</FieldError>
        </Field>
      </FieldGroup>

      <div className="flex items-center gap-3">
        <Button type="submit">Create account</Button>
        {saved && (
          <p role="status" className="text-sm text-muted-foreground">
            {saved}
          </p>
        )}
      </div>
    </FieldForm>
  )
}