import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks'

import { PAGES } from '../../../_utils/taxonomy'
import { Button } from '../../../button'
import { SpacingDivider, SpacingDividerSize } from '../../../divider/spacingDivider'
import { ItemAction } from '../../../itemAction'
import { ItemCheckbox } from '../../../itemCheckbox'
import { BottomContent, Content, MainContent } from '../../../layout/content'
import { BaseSection } from '../../../layout/section/baseSection'
import { TextField } from '../../../textField'
import { TheVoice } from '../../../theVoice'


<Meta title={`${PAGES}/Login`} />

<Canvas>
  <Story name="Login page">
    <React.Fragment>
      <MainContent>
        <Content>
          <BaseSection noHorizontalSpacing>
            <TheVoice>What&apos;s your email and password?</TheVoice>
          </BaseSection>
          <BaseSection>
            <TextField />
            <SpacingDivider size={SpacingDividerSize.MEDIUM} />
            <TextField />
            <SpacingDivider size={SpacingDividerSize.SMALL} />
          </BaseSection>
          <BaseSection noHorizontalSpacing>
            <ItemCheckbox name="rememberme" labelTitle="Remember me" />
            <ItemAction href="#" action="Forgot password?" />
          </BaseSection>
        </Content>
        <BottomContent>
          <div style={{ textAlign: 'center' }}>
            <Button>Log in</Button>
          </div>
        </BottomContent>
      </MainContent>
    </React.Fragment>
  </Story>
</Canvas>