import { Meta } from "@storybook/react";
import { BadgeContainerProps } from "./BadgeContainerProps";
import BadgeContainer from "./BadgeContainer";
import Badge from "../Badge/Badge";
import Icon from "@/components/CommonUtilities/Icon/Icon";

export default {
  title: "Design System/Indicators/BadgeContainer",
  component: BadgeContainer,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The BadgeContainer component allows you to target text, HTML elements or React components that cannot have children, by wrapping both the targeted element and the Badge inside a BadgeContainer component. \n\n```javascript\nimport { BadgeContainer } from "@renault-ui-library"\n```',
      },
    },
  },
  argTypes: {
    dataTestId: {
      control: { type: "text" },
      description: "Specifies the data-test-id attribute for testing purposes.",
    },
    children: {
      control: { type: "text" },
      description:
        "The React elements that will be rendered inside the BadgeContainer.",
    },
    className: {
      control: { type: "text" },
      description:
        "Specifies a list of CSS classes that will be added to the BadgeContainer.",
    },
    dir: {
      control: { type: "text" },
      description:
        "Represents the dir HTML attribute. This is used to switch from LTR to RTL.",
    },
    style: {
      control: { type: "object" },
      description: "Sets additional CSS styles to the BadgeContainer.",
    },
  },
} as Meta;

export const Default = (args: BadgeContainerProps): JSX.Element => (
  <BadgeContainer {...args}>
    <Badge>6</Badge>
    <Icon size="xxlarge" name="bell" />
    {args.children}
  </BadgeContainer>
);

Default.args = {
  dataTestId: "badge-container-data-testid",
  className: "custom-class",
  dir: "LTR",
};