import {
  Canvas,
  Controls,
  Meta,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as ButtonSetStories from './ButtonSet.stories'
import { LifecycleTag } from '../../docs/components/LifecycleTag'

<Meta of={ButtonSetStories} />

<Title>ButtonSet</Title>
<Subtitle>
  Groups related buttons with consistent sizing and a shared layout orientation.
</Subtitle>
<LifecycleTag variant="Stable" />
**Component type:** Container

<Canvas of={ButtonSetStories.Responsive} layout="padded" sourceState="shown" />
<Controls of={ButtonSetStories.Responsive} />

## When to use

Use `ButtonSet` when you have two or more related actions that should share the same size and layout behavior. It enforces consistent sizing across children so you don't have to set `size` on each `Button` individually. Use `Button` directly when you have a single action or when layout is handled by the surrounding container.

## Import

```tsx
import { ButtonSet, Button } from '@chainlink/blocks'
```

## Anatomy

```tsx
<ButtonSet size="sm" orientation="responsive">
  <Button>Save</Button>
  <Button variant="secondary">Cancel</Button>
</ButtonSet>
```

## Rendered Element

`ButtonSet` renders a `<div>` wrapper and clones each `Button` child to apply the appropriate `group` variant. This keeps sizing centralized without requiring each button to know about its siblings.

## Orientations

The `orientation` prop controls layout behavior:

- `responsive` — column on mobile, row on `md` and larger
- `horizontal` — row at all sizes; children share equal width
- `vertical` — stacked column at all sizes; each child is full width

<Canvas of={ButtonSetStories.Responsive} layout="padded" sourceState="shown" />
<Canvas of={ButtonSetStories.Horizontal} layout="padded" sourceState="shown" />
<Canvas of={ButtonSetStories.Vertical} layout="padded" sourceState="shown" />

## Examples

### Sizes

<Canvas
  of={ButtonSetStories.SizesTextOnly}
  layout="padded"
  sourceState="shown"
/>
<Canvas
  of={ButtonSetStories.SizesWithIcon}
  layout="padded"
  sourceState="shown"
/>

## Related components

- `Button` for single actions
- `ButtonIcon` for icon-only actions within a set