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

import { APP } from '../_utils/taxonomy'
import { FilterBar } from '../filterBar'
import { BusIcon } from '../icon/busIcon'
import { CarpoolIcon } from '../icon/carpoolIcon'

<Meta title={`${APP}/FilterBar`} />

# FilterBar

export const supplyInfo = [
  {
    liquidity: 98,
    icon: CarpoolIcon,
    ariaLabel: 'Carpooling available',
    iconTitle: 'Carpooling',
  },
  {
    liquidity: 12,
    icon: BusIcon,
    iconTitle: 'Bus',
    isDisabled: true,
    ariaLabel: 'Bus available',
  },
]

<Canvas>
  <Story name="Default">
    <FilterBar supplyInfo={supplyInfo} ctaText="See rides" onClick={() => {}} />
  </Story>
</Canvas>

## Usage

```jsx
import { FilterBar } from '@blablacar/ui-library/build/filterBar'
;<FilterBar />
```

<ArgsTable of={FilterBar} />