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}
/>

export const buttonGroupTemplate = args => {
  return <ButtonGroup {...args} />;
};

<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"
    args={{
      type: ButtonEnums.type.primary,
      size: ButtonEnums.size.medium,
      orientation: ButtonEnums.orientation.horizontal,
      buttons: [
        {
          children: 'Button 1',
          onClick: () => console.log('Button 1 clicked'),
        },
        {
          children: 'Button 2',
          onClick: () => console.log('Button 2 clicked'),
        },
        {
          children: 'Button 3',
          onClick: () => console.log('Button 3 clicked'),
        },
      ],
      activeIndex: 0,
      onActiveIndexChange: index => console.log(index),
    }}
  >
    {buttonGroupTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={ButtonGroup} />

## Usage

## Contribute

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