import { Meta } from "@storybook/react";
import ButtonGroup from "./ButtonGroup";
import { ButtonGroupProps } from "./ButtonGroupProps";
import Button from "../Button/Button";

export default {
  title: "Design System/Buttons/ButtonGroup",
  component: ButtonGroup,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'ButtonGroup component is a container for buttons that can be toggled. \n\n```javascript\nimport { ButtonGroup } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    className: {
      control: { type: "text" },
      description: "Sets the className of the ButtonGroup component.",
    },
    dir: {
      control: { type: "select", options: ["rtl", "ltr", "auto"] },
      description: "Sets the direction of the ButtonGroup.",
    },
    disabled: {
      control: { type: "boolean" },
      description: "Disables the whole group of buttons.",
    },
    width: {
      control: { type: "text" },
      description: "Sets the width of the ButtonGroup.",
    },
  },
} as Meta;

export const Default = (args: ButtonGroupProps): JSX.Element => (
  <ButtonGroup {...args}>
    <Button togglable={true} icon="bold">
      Bold
    </Button>
    <Button togglable={true} icon="italic">
      Italic
    </Button>
    <Button togglable={true} icon="underline">
      Underline
    </Button>
  </ButtonGroup>
);

Default.args = {
  dataTestId: "button-group-data-testid",
  className: "",
  dir: "ltr",
  disabled: false,
  width: "50%",
};