Form

import {
  Checkbox,
  CtaButton,
  Form,
  FormColumn,
  FormSection,
  Select,
  TextArea,
  TextInput,
} from 'marketing-ui'

function Demo() {
  return (
    <Form
      heading='Contact us'
      footer={<CtaButton type='submit'>Submit</CtaButton>}
      body={
        <>
          <TextInput
            label='Email'
            name='email'
            type='email'
            placeholder='[email protected]'
            required
          />
          <FormColumn
            left={
              <TextInput
                label='First name'
                name='firstName'
                placeholder='First name'
                required
              />
            }
            right={
              <TextInput
                label='Last name'
                name='lastName'
                placeholder='Last name'
                required
              />
            }
          />
          <FormSection
            heading='Your address'
            copy='Where should we reach you?'
          >
            <TextInput
              label='Street'
              name='street'
              placeholder='Street and number'
              optional='(optional)'
            />
            <FormColumn
              left={
                <TextInput
                  label='Postal code'
                  name='postalCode'
                  placeholder='Postal code'
                  optional='(optional)'
                />
              }
              right={
                <TextInput
                  label='City'
                  name='city'
                  placeholder='City'
                  optional='(optional)'
                />
              }
            />
          </FormSection>
          <FormSection heading='Your message'>
            <Select
              label='Topic'
              name='topic'
              placeholder='Choose one...'
            >
              {['General', 'Support', 'Feedback'].map((option) => {
                return <option value={option} key={option}>{option}</option>
              })}
            </Select>
            <TextArea
              name='message'
              placeholder='Your message'
              optional='(optional)'
            />
            <Checkbox
              name='consent'
              label='I agree to the privacy policy.'
              required
            />
          </FormSection>
        </>
      }
    />
  )
}

export default Demo