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

import { Button, ButtonStatus } from 'button/index'
import { ButtonGroup } from 'buttonGroup/index'
import { Disclaimer } from 'disclaimer/index'
import { ItemAction } from 'itemAction/index'
import carpoolBlaBlaBusSmall from 'layout/section/heroSection/images-for-stories/carpool-bbb-small.svg'
import { Marquee } from 'marquee/index'
import { SubHeader } from 'subHeader/index'
import { TripCardSample } from 'tripCardSample/index'

import { PAGES } from '../../../_utils/taxonomy'
import carpoolBlaBlaBusLarge from './carpool-coral-bus-large.svg'
import { SeaPage } from './index'

export const ILLUSTRATIONS = {
  'carpool-bla-bla-bus': {
    large: carpoolBlaBlaBusLarge,
    small: carpoolBlaBlaBusSmall,
  },
}

export const Body = (
  <div>
    <Marquee>
      <TripCardSample departure="Ajaccio" arrival="Amsterdam" priceLabel="from" price="€90" />
      <TripCardSample departure="London" arrival="Manchester" priceLabel="from" price="€10" />
      <TripCardSample departure="London" arrival="Paris" priceLabel="from" price="€50" />
    </Marquee>
    <ButtonGroup>
      <Button status={ButtonStatus.PRIMARY}> Register with email </Button>
      <Button status={ButtonStatus.FACEBOOK}> Register with Facebook </Button>
      <Button status={ButtonStatus.VKONTAKTE}> Register with Facebook </Button>
    </ButtonGroup>
    <Disclaimer as="p">
      By clicking in register with email or Facebook you accept the terms of CGU and certify you
      are older than 18.
    </Disclaimer>
    <SubHeader>Already a member?</SubHeader>
    <ItemAction action="Sign In" />
  </div>
)


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

# ** SEA Landing Pages **
<Canvas>
  <Story name="Default">
    <SeaPage
      heading="Et vous, qui allez-vous retrouver ?"
      illustationUrl={{
        small: ILLUSTRATIONS['carpool-bla-bla-bus'].small,
        large: ILLUSTRATIONS['carpool-bla-bla-bus'].large,
      }}
    >
      {Body}
    </SeaPage>
  </Story>
</Canvas>

## Specifications

SEA Landing Pages responsive 2 Column Vertical Grid

- `Body`  track (area) has max-width `375px` and is vertical/horizontally aligned to the center

**Large**

- `Media` track (area) has `100%` `height`;

## Usage

```jsx
import { SeaPage } from '@blablacar/ui-library/build/SeaPage'

 <SeaPage
    heading="Et vous, qui allez-vous retrouver ?"
    illustationUrl={{
        small: ILLUSTRATIONS['carpool-bla-bla-bus'].small,
        large: ILLUSTRATIONS['carpool-bla-bla-bus'].large
      }}
  >
    // Content here {children}
  </SeaPage>
```

<ArgsTable of={SeaPage} />