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

import { SECTIONS } from '../../../_utils/taxonomy'
import { Address, Itinerary } from '../../../itinerary'
import { SectionContentSize } from '../../../layout/section/baseSection'
import { TripCard } from '../../../tripCard'
import { CardsGridSection } from './index'

<Meta title={`${SECTIONS}/CardsGridSection`} />

export const tripCardConfig = {
  'aria-label': 'Pick-up point: Paris, Drop-off point: Bordeaux, Departure time: 09:00, warning',
  href: '/',
  itinerary: (
    <Itinerary>
      <Address label="Paris" subLabel="Porte de Vincennes" time="09:00" />
      <Address label="Bordeaux" subLabel="Gare Bordeaux Saint-Jean" time="12:00" />
    </Itinerary>
  ),
  price: '8,00€',
  flags: {
    ladiesOnly: true,
    maxTwo: true,
    autoApproval: true,
  },
  badge: 'Cheapest',
  title: '',
}

export const buttonProps = {
  buttonTitle: 'Search more',
  buttonHref: '#',
}

export const titleProps = {
  title: 'Available rides',
}

# **CardsGridSection**

<Canvas>
  <Story name="with contentSize SMALL">
    <CardsGridSection {...titleProps} {...buttonProps}>
      <TripCard {...tripCardConfig} />
      <TripCard {...tripCardConfig} />
      <TripCard {...tripCardConfig} />
      <TripCard {...tripCardConfig} />
      <TripCard {...tripCardConfig} />
      <TripCard {...tripCardConfig} />
    </CardsGridSection>
  </Story>
  <Story name="with contentSize LARGE">
    <CardsGridSection contentSize={SectionContentSize.LARGE} {...titleProps} {...buttonProps}>
      <TripCard {...tripCardConfig} />
      <TripCard {...tripCardConfig} />
      <TripCard {...tripCardConfig} />
      <TripCard {...tripCardConfig} />
      <TripCard {...tripCardConfig} />
      <TripCard {...tripCardConfig} />
    </CardsGridSection>
  </Story>
</Canvas>

## Specifications

Used to display multiple TripCards in a grid pattern. Behaves the same as `CardsSection` on small devices.

## Usage

```jsx
import { CardsGridSection } from '@blablacar/ui-library/build/layout/section/cardsGridSection'
<CardsGridSection>
  <TripCard />
  <TripCard />
  <TripCard />
</CardsGridSection>
```

<ArgsTable of={CardsGridSection} />