const schema = z.object({
  email: z.string().email(),
  firstName: z.string().min(1),
  preferredSport: z.enum(['Basketball', 'Football', 'Other']),
  newsletter: z.boolean().default(false),
})

export default () => (
  <Form
    schema={schema}
    renderField={({ Field, ...props }) => {
      const { name, errors } = props

      return (
        <Field key={name} {...props}>
          {({ Label, SmartInput, Errors }) => (
            <>
              <Label className={errors ? 'text-red-600' : undefined} />
              <SmartInput
                className={
                  errors
                    ? 'border-red-600 focus:border-red-600 focus:ring-red-600'
                    : undefined
                }
              />
              <Errors />
            </>
          )}
        </Field>
      )
    }}
  />
)