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 { fieldType, name, label, required } = props

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

            const inputWithLabel =
              fieldType === 'boolean' ? (
                <CheckboxWrapper>
                  <SmartInput />
                  {labelElement}
                </CheckboxWrapper>
              ) : (
                <>
                  {labelElement}
                  <SmartInput />
                </>
              )

            return (
              <>
                {inputWithLabel}
                <Errors />
              </>
            )
          }}
        </Field>
      )
    }}
  />
)