import { Meta } from "@storybook/react";
import { TypographyProps } from "./TypographyProps";
import Typography from "./Typography";

export default {
  title: "Design System/Common Utilities/Typography",
  component: Typography,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          'The Typography is a reusable component that helps presenting the content in a React application. It could trim down a lot of time as the application grows. \n\n```javascript\nimport { Typography } 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: "Specifies the child nodes of the component.",
    },
    className: {
      control: { type: "text" },
      description:
        "Specifies the list of CSS classes to be added to the element.",
    },
    fontSize: {
      control: {
        type: "select",
        options: ["small", "medium", "large", "xsmall", "xlarge"],
      },
      description:
        "Overrides the font size applied by the theme typography styles.",
    },
    fontWeight: {
      control: { type: "select", options: ["bold", "normal", "light"] },
      description:
        "Overrides the font weight applied by the theme typography styles.",
    },
    id: {
      control: { type: "text" },
      description:
        "Sets the id attribute of the component's topmost div element.",
    },
    margin: {
      control: { type: "object" },
      description: "Specifies the margin applied to the element.",
    },
    style: {
      control: { type: "object" },
      description: "Sets additional CSS styles to the element.",
    },
    textAlign: {
      control: {
        type: "select",
        options: ["center", "left", "right", "justify"],
      },
      description: "Specifies the text alignment.",
    },
    textTransform: {
      control: {
        type: "select",
        options: ["capitalize", "lowercase", "uppercase"],
      },
      description: "Specifies the text transformation.",
    },
    themeColor: {
      control: {
        type: "select",
        options: [
          "error",
          "inverse",
          "inherit",
          "success",
          "dark",
          "light",
          "primary",
          "secondary",
          "tertiary",
          "info",
          "warning",
        ],
      },
      description: "Specifies the theme color of the typography.",
    },
  },
} as Meta;

export const Default = (args: TypographyProps): JSX.Element => (
  <Typography tag={"p"} {...args} />
);
Default.args = {
  dataTestId: "typography-data-testid",
  children: "Typography Text",
  className: "typography-class",
  fontSize: "medium",
  fontWeight: "normal",
  id: "typography-id",
  margin: { top: 10, bottom: 10 },
  style: {},
  textAlign: "left",
  textTransform: "capitalize",
  themeColor: "primary",
};