import React from 'react'
import { Message } from 'shengnian-ui-react'

import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
import ShorthandExample from 'docs/app/Components/ComponentDoc/ShorthandExample'

const CheckboxTypesExamples = () => (
  <ExampleSection title='Types'>
    <Message info>
      All checkbox types use an input with type <code>checkbox</code> unless <code>type</code> is provided.
      {' '}Use <code>type</code> if you'd like to mix and match style and behavior.
      {' '}For instance, <code>slider</code> with <code>type</code> radio for exclusive sliders.
    </Message>

    <ComponentExample
      title='Checkbox'
      description='A box for checking.'
      examplePath='modules/Checkbox/Types/CheckboxExampleCheckbox'
    />
    <ShorthandExample
      description='You can define a label with a props object.'
      examplePath='modules/Checkbox/Types/CheckboxExampleShorthandObject'
    />
    <ShorthandExample
      description='You can define a label by passing your own element.'
      examplePath='modules/Checkbox/Types/CheckboxExampleShorthandElement'
    />

    <ComponentExample
      title='Toggle'
      description='A checkbox can toggle.'
      examplePath='modules/Checkbox/Types/CheckboxExampleToggle'
    />

    <ComponentExample
      title='Slider'
      description='A checkbox can look like a slider.'
      examplePath='modules/Checkbox/Types/CheckboxExampleSlider'
    />

    <ComponentExample
      title='Radio'
      description='A checkbox can be formatted as a radio element. This means it is an exclusive option.'
      examplePath='modules/Checkbox/Types/CheckboxExampleRadio'
    />

    <ComponentExample
      title='Radio Group'
      examplePath='modules/Checkbox/Types/CheckboxExampleRadioGroup'
    >
      <Message warning>
        Radios in a group must be
        <a
          href='https://facebook.github.io/react/docs/forms.html#controlled-components'
          rel='noopener noreferrer'
          target='_blank'
        >
          &nbsp;controlled components.
        </a>
      </Message>
    </ComponentExample>
  </ExampleSection>
)

export default CheckboxTypesExamples