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

import { PAGES } from '../../../_utils/taxonomy'
import { Avatar } from '../../../avatar'
import { ContentDivider } from '../../../divider/contentDivider'
import { ItemData } from '../../../itemData'
import { Itinerary } from '../../../itinerary'
import { BaseSection } from '../../../layout/section/baseSection'
import { TheVoice } from '../../../theVoice'

<Meta title={`${PAGES}/Search results/Ride details/Bus`} />

<Canvas>
  <Story name="Bus">
    <React.Fragment>
      <BaseSection noHorizontalSpacing>
        <TheVoice>Ven. 11 octobre</TheVoice>
      </BaseSection>
      <BaseSection>
        <Itinerary
          isCollapsible
          collapsedLabel="2 stopovers"
          fromAddon="Lille"
          toAddon="Nice"
          places={[
            {
              mainLabel: 'Gare routière de Bercy',
              subLabel: 'Paris',
              isoDate: '2017-12-11T09:00',
              time: '09:00',
              href: '#',
            },
            {
              subLabel: 'Mâcon',
              isoDate: '2017-12-11T10:00',
              time: '10:00',
            },
            {
              subLabel: 'Lyon',
              isoDate: '2017-12-11T11:00',
              time: '11:00',
            },
            {
              mainLabel: 'Gare de Marseille Saint Charles',
              subLabel: 'Marseille',
              isoDate: '2017-12-11T20:00',
              time: '20:00',
              href: '#',
            },
          ]}
          small={false}
        />
      </BaseSection>
      <BaseSection noHorizontalSpacing>
        <ItemData data="17,50 €" mainTitle="Prix total pour 1 passager" />
        <ContentDivider />
        <ItemData
          mainTitle="BlaBlaBus"
          data={<Avatar image="http://placehold.it/144x144" alt="Bus Logo" />}
        />
        <img width="100%" src="http://placehold.it/630x315" alt="Vehicle" />
      </BaseSection>
    </React.Fragment>
  </Story>
</Canvas>