<WithState />

import React from "react"
import {Settings} from "attio/client"

import schema from "./schema"

export default Settings.defineWorkspacePage(schema, () => {
  const {Form, Section, Toggle, TextInput, WithState} = Settings.useForm(schema)

  return (
    <Form>
      <Section title="API Configuration">
        <Toggle label="Use custom endpoint" name="use_custom_endpoint" />
        <WithState values>
          {({values}) =>
            values.use_custom_endpoint ? (
              <TextInput label="Custom API endpoint" name="custom_api_endpoint" type="url" url />
            ) : null
          }
        </WithState>
      </Section>
    </Form>
  )
})