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

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

      return (
        <Field key={name} {...props}>
          {({ Label, SmartInput, Errors }) => (
            <>
              <Label>
                {label}
                {required && <sup>*</sup>}
              </Label>
              <SmartInput />
              <Errors />
            </>
          )}
        </Field>
      )
    }}
  />
)