import { Meta, StoryObj } from '@storybook/react';

import { ButtonGroup, CSSIconMinus, IconPlus } from '@/components';

const meta: Meta<typeof ButtonGroup> = {
  component: ButtonGroup,
};

export default meta;

type TStory = StoryObj<typeof ButtonGroup>;

export const Group: TStory = {
  args: {
    className: 'w-fit',
    children: (
      <>
        <ButtonGroup.Item onClick={() => {}} disabled={false} className="group">
          <CSSIconMinus className={'group-disabled:after:bg-gray-ui-700'} />
        </ButtonGroup.Item>
        <ButtonGroup.Item onClick={() => {}} disabled={false} className="group">
          <IconPlus className="w-4 h-4 stroke-gray-ui disabled:stroke-gray-ui-700" />
        </ButtonGroup.Item>
      </>
    ),
  },
};

export const GroupWide: TStory = {
  args: {
    className: 'w-fit',
    children: (
      <>
        <ButtonGroup.Item onClick={() => {}} disabled={false} className="group" shape="default">
          Option 1
        </ButtonGroup.Item>
        <ButtonGroup.Item onClick={() => {}} disabled={false} className="group" shape="default">
          Option 2
        </ButtonGroup.Item>
      </>
    ),
  },
};