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

import { color } from '../../../_utils/branding'
import { SECTIONS } from '../../../_utils/taxonomy'
import { CheckShieldIcon } from '../../../icon/checkShieldIcon'
import { DirectionIcon } from '../../../icon/directionIcon'
import { IdCardVerifiedIcon } from '../../../icon/idCardVerifiedIcon'
import { ColumnedContentSection, ColumnedSectionContentMediaKind } from './index'

<Meta title={`${SECTIONS}/ColumnedContentSection`} parameters={{ knobs: { disabled: true }}} />

export const Template = (args) => <ColumnedContentSection {...args} />

# **ColumnedContentSection**

### Default

<Canvas>
  <Story name="Default" args={{
    columnContentList: [
      {
        title: 'Pratique',
        content:
          'Trouvez rapidement un covoiturage ou un bus à proximité parmi les millions de trajets proposés.',
      },
      {
        title: 'Facile',
        content:
          'Trouvez le trajet parfait ! Il vous suffit d’entrer votre adresse exacte, de choisir le voyage qui vous convient le mieux, et de réserver.',
      },
      {
        title: 'Direct',
        content:
          'Que vous prévoyiez à l’avance ou réserviez en dernière minute, vous trouverez toujours un tarif avantageux.',
      },
    ]
  }}>
    {Template.bind({})}
  </Story>
</Canvas>

### With top link

<Canvas>
  <Story name="With top link" args={{
    title:"Allez où vous voulez. D'où vous voulez.",
    topLinkLabel:"En savoir plus",
    topLinkHref:"https://www.blablacar.fr/how-does-car-sharing-work",
    columnContentList:[
      {
        title: 'Pratique',
        content:
          'Trouvez rapidement un covoiturage ou un bus à proximité parmi les millions de trajets proposés.',
      },
      {
        title: 'Facile',
        content:
          'Trouvez le trajet parfait ! Il vous suffit d’entrer votre adresse exacte, de choisir le voyage qui vous convient le mieux, et de réserver.',
      },
      {
        title: 'Direct',
        content:
          'Que vous prévoyiez à l’avance ou réserviez en dernière minute, vous trouverez toujours un tarif avantageux.',
      },
    ]
  }}>
    {Template.bind({})}
  </Story>
</Canvas>

### With media cover (blog)

<Canvas>
  <Story name="With media cover (blog)" args={{
    title:"Allez où vous voulez. D'où vous voulez.",
    topLinkLabel:"En savoir plus",
    topLinkHref:"https://www.blablacar.fr/how-does-car-sharing-work",
    columnContentList: [
      {
        title: 'Mais au fait, c’est quoi l’histoire de l’assurance auto en France ?',
        content:
          'L’assurance auto est bien évidemment obligatoire en France mais cela n’a pas toujours été le cas. Ce n’est qu’à partir de 1930 que naît le premier code des assurances.',
        media: {
          kind: ColumnedSectionContentMediaKind.COVER,
          pictureUrl:
            'https://dxxbxu0f802py.cloudfront.net/wp-content/uploads/2016/12/16144804/carre_savings-300x300.jpg',
          href:
            'https://blog.blablacar.fr/blablalife/blablafamily/bons-plans/assurance/mais-au-fait-c-est-quoi-l-histoire-de-l-assurance-auto-en-france',
        },
        footerLinkLabel: 'En savoir plus',
        footerLinkHref:
          'https://blog.blablacar.fr/blablalife/blablafamily/bons-plans/assurance/mais-au-fait-c-est-quoi-l-histoire-de-l-assurance-auto-en-france',
      },
      {
        title: 'Jeune conducteur ? On vous aide à trouver votre assurance auto !',
        content:
          'Vous avez longtemps covoituré en tant que passager, mais maintenant c’est terminé. Vous avez enfin acheté votre propre voiture et il va falloir assurer ce nouveau véhicule. La galère commence parce que c’est compliqué de trouver une assurance auto abordable quand on est jeune conducteur. Nous sommes tous passé par là.',
        media: {
          kind: ColumnedSectionContentMediaKind.COVER,
          pictureUrl:
            'https://dxxbxu0f802py.cloudfront.net/wp-content/uploads/2018/02/27101220/170703_BlaBlaCar_10712_900x900-300x300.jpg',
          href:
            'https://blog.blablacar.fr/blablalife/blablafamily/bons-plans/assurance/mais-au-fait-c-est-quoi-l-histoire-de-l-assurance-auto-en-france',
        },
        footerLinkLabel: 'En savoir plus',
        footerLinkHref:
          'https://blog.blablacar.fr/blablalife/blablafamily/bons-plans/assurance/mais-au-fait-c-est-quoi-l-histoire-de-l-assurance-auto-en-france',
      },
      {
        title: 'BlaBlaSure, la 1ère assurance auto qui récompense le covoiturage',
        content:
          'La plupart d’entre vous nous connaissent pour le covoiturage si pratique et économique, mais connaissiez-vous notre offre d’assurance auto ? BlaBlaSure, c’est une assurance auto à l’année pas tout à fait comme les autres. Parmi les différences, le bonus covoitureur est un avantage exclusivement pensé pour vous. Mais c’est quoi ce bonus ? On vous explique !',
        media: {
          kind: ColumnedSectionContentMediaKind.COVER,
          pictureUrl:
            'https://dxxbxu0f802py.cloudfront.net/wp-content/uploads/2019/08/29083651/Organic_Gift_2-300x169.png',
          href:
            'https://blog.blablacar.fr/blablalife/blablafamily/bons-plans/assurance/mais-au-fait-c-est-quoi-l-histoire-de-l-assurance-auto-en-france',
        },
        footerLinkLabel: 'En savoir plus',
        footerLinkHref:
          'https://blog.blablacar.fr/blablalife/blablafamily/bons-plans/assurance/mais-au-fait-c-est-quoi-l-histoire-de-l-assurance-auto-en-france',
      },
    ]
  }}>
    {Template.bind({})}
  </Story>
</Canvas>

### With media fit (pro)

<Canvas>
  <Story name="With media fit (pro)" args={{
    title:"Gain access to more than 20 million travellers across the whole country",
    columnContentList: [
      {
        title: '#1 platform in Russia for passenger auto transport*',
        content: 'Find passengers on any route among more than 20 million of BlaBlaCar travelers.',
        media: {
          kind: ColumnedSectionContentMediaKind.FIT,
          pictureUrl:
            'https://cdn.blablacar.com/kairos/assets/build/images/presentation_item_1-b0786829cd9fdc76581d2ca07d4e9357.svg',
        },
      },
      {
        title: 'An easy-to-use website for managing trips',
        content:
          'Manage your routes and control the filling up of buses from your computer or smartphone.',
        media: {
          kind: ColumnedSectionContentMediaKind.FIT,
          pictureUrl:
            'https://cdn.blablacar.com/kairos/assets/build/images/presentation_item_2-1a58d466645859b86d9bef6e454c7e9b.svg',
        },
      },
      {
        title: 'Personal support from BlaBlaCar PRO',
        content:
          'Your personal manager will help to get the maximum benefit from working with the platform.',
        media: {
          kind: ColumnedSectionContentMediaKind.FIT,
          pictureUrl:
            'https://cdn.blablacar.com/kairos/assets/build/images/presentation_item_3-28b79c781e8f536d800aa31254286333.svg',
        },
      },
    ]
  }}>
    {Template.bind({})}
  </Story>
</Canvas>

### With media element

<Canvas>
  <Story name="With media element" args={{
    title:"Ce qui va vous plaire",
    columnContentList: [
      {
        media: {
          kind: ColumnedSectionContentMediaKind.ELEMENT,
          element: <DirectionIcon size={40} />,
        },
        title: 'Avoir le choix',
        content:
          "L'avantage des routes ? Elles vont partout ! Littéralement. Profitez de milliers de destinations.",
      },
      {
        media: {
          kind: ColumnedSectionContentMediaKind.ELEMENT,
          element: <IdCardVerifiedIcon size={40} />,
        },
        title: 'Communauté',
        content:
          "Nous connaissons chacun de nos membres et de nos partenaires de bus. Comment ? Nous vérifions profils, avis, et pièces d'identité. Vous savez ainsi avec qui vous voyagez.",
      },
      {
        media: {
          kind: ColumnedSectionContentMediaKind.ELEMENT,
          element: <CheckShieldIcon size={40} />,
        },
        title: 'Assurance',
        content:
          "Assurez votre voiture à l'année avec BlaBlaSure : profitez de couvertures conçues pour les covoitureurs avec AXA à des tarifs très compétitifs !",
        footerLinkLabel: 'En savoir plus',
        footerLinkHref: 'https://www.blablacar.fr/insurance-carpooling',
      },
    ]
  }}>
    {Template.bind({})}
  </Story>
</Canvas>

### One column

<Canvas>
  <Story name="One column" args={{
    columnContentList: [
      {
        title: 'Pratique',
        content:
          'Trouvez rapidement un covoiturage ou un bus à proximité parmi les millions de trajets proposés.',
      },
    ]
  }}>
    {Template.bind({})}
  </Story>
</Canvas>

### Two columns

<Canvas>
  <Story name="Two columns" args={{
    columnContentList: [
      {
        title: 'Pratique',
        content:
          'Trouvez rapidement un covoiturage ou un bus à proximité parmi les millions de trajets proposés.',
      },
      {
        title: 'Facile',
        content:
          'Trouvez le trajet parfait ! Il vous suffit d’entrer votre adresse exacte, de choisir le voyage qui vous convient le mieux, et de réserver.',
      },
    ]
  }}>
    {Template.bind({})}
  </Story>
</Canvas>

### Four columns

<Canvas>
  <Story name="Four columns" args={{
    columnContentList: [
      {
        title: 'Pratique',
        content:
          'Trouvez rapidement un covoiturage ou un bus à proximité parmi les millions de trajets proposés.',
      },
      {
        title: 'Facile',
        content:
          'Trouvez le trajet parfait ! Il vous suffit d’entrer votre adresse exacte, de choisir le voyage qui vous convient le mieux, et de réserver.',
      },
      {
        title: 'Direct',
        content:
          'Que vous prévoyiez à l’avance ou réserviez en dernière minute, vous trouverez toujours un tarif avantageux.',
      },
      {
        title: 'Pratique',
        content:
          'Trouvez rapidement un covoiturage ou un bus à proximité parmi les millions de trajets proposés.',
      },
    ]
  }}>
    {Template.bind({})}
  </Story>
</Canvas>

### With custom background color

<Canvas>
  <Story name="with custom background color" args={{
    backgroundColor: color.lightGray,
    columnContentList: [
      {
        title: 'Pratique',
        content:
          'Trouvez rapidement un covoiturage ou un bus à proximité parmi les millions de trajets proposés.',
      },
      {
        title: 'Facile',
        content:
          'Trouvez le trajet parfait ! Il vous suffit d’entrer votre adresse exacte, de choisir le voyage qui vous convient le mieux, et de réserver.',
      },
      {
        title: 'Direct',
        content:
          'Que vous prévoyiez à l’avance ou réserviez en dernière minute, vous trouverez toujours un tarif avantageux.',
      },
    ]
  }}>
    {Template.bind({})}
  </Story>
</Canvas>

## Specifications

## Usage

```jsx
import { ColumnedContentSection } from '@blablacar/ui-library/build/layout/section/columnedContentSection'

const items = [
  {
    title: 'Pratique',
    content:
      'Trouvez rapidement un covoiturage ou un bus à proximité parmi les millions de trajets proposés.',
  },
  {
    title: 'Facile',
    content:
      'Trouvez le trajet parfait ! Il vous suffit d’entrer votre adresse exacte, de choisir le voyage qui vous convient le mieux, et de réserver.',
  },
  {
    title: 'Direct',
    content:
      'Que vous prévoyiez à l’avance ou réserviez en dernière minute, vous trouverez toujours un tarif avantageux.',
  },
]

<ColumnedContentSection
  title="Allez où vous voulez. D'où vous voulez."
  topLinkLabel="En savoir plus"
  topLinkHref="https://www.blablacar.fr/how-does-car-sharing-work"
  columnContentList={items}
/>
```

<ArgsTable of={ColumnedContentSection} />