import React from 'react';
import { Meta, Story } from '@storybook/react';
import { IButtonGroupProps, MoleculeButtonGroup } from 'react/molecules/ButtonGroup';
import { action } from '@storybook/addon-actions';

const meta: Meta = {
  title: 'React/molecules/ButtonGroup',
  component: MoleculeButtonGroup,
  argTypes: {},
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const TemplateButtonGroup: Story<IButtonGroupProps> = (props) => <MoleculeButtonGroup {...props} />;

// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
// https://storybook.js.org/docs/react/workflows/unit-testing
export const ButtonGroup = TemplateButtonGroup.bind({});

ButtonGroup.args = {
  data: [
    {
      id:1,
      disabled: false,
      onClick: action('Event Click'),
      color: 'primary',
      text: 'Button 1',
      type: 'default',
    },
    {
      id:2,
      disabled: false,
      onClick: action('Event Click'),
      color: 'secondary',
      text: 'Button 2',
      type: 'ghost',
    },
    {
      id:3,
      disabled: false,
      onClick: action('Event Click'),
      color: 'primary',
      text: 'Button 3',
      type: 'outline',
    },
    {
      id:4,
      disabled: false,
      onClick: action('Event Click'),
      color: 'custom',
      text: 'Button 4',
      type: 'icon',
      customColor: 'quinary',
      icon: 'beer',
      typeButtonIcon: 'default'
    }
  ],
  type: 'row'
};
