import { Story, Meta } from "@storybook/react";
import React from "react";
import { textColorTokens, TextTypes } from "../../../design-system/tokens";
import { Text, TextProps } from "../text";
import { TextDocs } from "./TextDocs";

export default {
  title: "Atoms/Typography/Text",
  component: Text,
  parameters: {
    docs: {
      page: TextDocs,
    },
  },
} as Meta;

export const Default: Story<TextProps> = args => {
  return (
    <Text color={args.color} type={args.type} {...args}>
      I'm text with type {args.type}
    </Text>
  );
};

Default.args = {
  type: "P",
  color: "text-default-color",
};

Default.argTypes = {
  color: {
    options: Object.keys(textColorTokens),
    control: { type: "select" },
  },
  type: {
    options: Object.keys(TextTypes),
    control: { type: "select" },
  },
};

Default.parameters = {
  controls: {
    exclude: ["themedColor", "theme", "as", "forwardedAs"],
  },
};