Form

'use client'

import { useState } from 'react'
import { z } from 'zod'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field'
import { Form } from '@/components/ui/form'
import { Input } from '@/components/ui/input'

const schema = z.object({
  company: z.string().min(2, 'Enter your company name.'),
  email: z.email('Enter an email like name@company.com.'),
  seats: z.coerce
    .number('Enter a number.')
    .int()
    .min(1, 'At least 1 seat.')
    .max(500, 'Up to 500 seats; contact sales for more.'),
})

export default function FormSchema() {
  const [done, setDone] = useState<z.infer<typeof schema> | null>(null)
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Form schema={schema} onSubmit={setDone}>
        <Field name="company">
          <FieldLabel>Company</FieldLabel>
          <Input autoComplete="organization" />
          <FieldError />
        </Field>
        <Field name="email">
          <FieldLabel>Billing email</FieldLabel>
          <Input type="email" autoComplete="email" />
          <FieldError />
        </Field>
        <Field name="seats">
          <FieldLabel>Seats</FieldLabel>
          <Input inputMode="numeric" defaultValue="5" />
          <FieldDescription>You can add more later.</FieldDescription>
          <FieldError />
        </Field>
        <div>
          <Button type="submit">Start trial</Button>
        </div>
      </Form>
      {done ? (
        <Alert variant="success">
          <AlertTitle>Trial started</AlertTitle>
          <AlertDescription>
            {done.company}, {done.seats} seats. We emailed {done.email}.
          </AlertDescription>
        </Alert>
      ) : null}
    </div>
  )
}