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

import { BASIC } from '../_utils/taxonomy'
import { Button, ButtonStatus } from '../button'
import { ButtonGroup } from './index'

<Meta title={`${BASIC}/ButtonGroup`} />

# ButtonGroup

### Stack

<Canvas>
  <Story name="Stack">
    <ButtonGroup>
      <Button>Hello</Button>
      <Button status={ButtonStatus.TERTIARY}>there</Button>
    </ButtonGroup>
  </Story>
</Canvas>

### InLine

<Canvas>
  <Story name="InLine">
    <ButtonGroup isInline>
      <Button>Hello</Button>
      <Button status={ButtonStatus.TERTIARY}>there</Button>
    </ButtonGroup>
  </Story>
</Canvas>

### Reverse

<Canvas>
  <Story name="Reverse">
    <ButtonGroup isReverse>
      <Button>Hello</Button>
      <Button status={ButtonStatus.TERTIARY}>there</Button>
    </ButtonGroup>
  </Story>
</Canvas>

## Specifications

This component has two layout configurations based on small vs large screen size.

On small devices button group become vertical and consists of Primary and Tertiary buttons. Buttons width are 100%.

On large devices it's horizontal and consists of Primary and Secondary buttons placed inline with reduced spacing between them: 16pt.
Each button occupy 50% of the available space.

## Usage

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

<ButtonGroup>
  <Button>Hello</Button>
  <Button status={ButtonStatus.TERTIARY}>there</Button>
</ButtonGroup>
```

<ArgsTable of={ButtonGroup} />

## When should I use it?

Use it at the end of a flow. Allows the member to make a final decision.

- ✅ Always at the bottom of the screen
- ✅ Can be sticky
- ⛔️ Labels can't go on 2 lines. If too long we use "…"

## TODO

- [ ] Force button types