import { Button, ButtonGroup, ButtonEnums } from '../../../components';

import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import {
  createComponentTemplate,
  createStoryMetaSettings,
} from '../../../storybook/functions/create-component-story';

export const argTypes = {
  component: ButtonGroup,
  title: 'Components/ButtonGroup',
};

<Meta
  title="Components/ButtonGroup"
  component={ButtonGroup}
/>

<Heading
  title="ButtonGroup"
  componentRelativePath="ButtonGroup/ButtonGroup.tsx"
/>

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Contribute](#contribute)

## Overview

ButtonGroup is a container for a group of buttons.

<Canvas>
  <Story name="Overview">
    <ButtonGroup
      orientation={ButtonEnums.orientation.horizontal}
      activeIndex={0}
      onActiveIndexChange={index => console.log(index)}
    >
      <button onClick={() => console.log('Button 1111 clicked')}>Button 1</button>
      <button onClick={() => console.log('Button 222 clicked')}>Button 2</button>
      <button onClick={() => console.log('Button 33 clicked')}>Button 3</button>
    </ButtonGroup>
  </Story>
</Canvas>

## Props

<ArgsTable of={ButtonGroup} />

## Usage

## Contribute

<Footer componentRelativePath="ButtonGroup/__stories__/buttonGroup.stories.mdx" />
