import { Story, Meta } from "@storybook/react";
import { Heading, HeadingProps } from "../heading";
import { HeaderDocs } from "./HeaderDocs";
import React from 'react';
import { StoryLayout } from '../../../../.storybook/StoryComponents';
import { textColorTokens } from '../../../design-system/tokens/palette';
import { HeadingTypes } from '../../../design-system/tokens/typography';

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

export const Default: Story<HeadingProps> = args => {
  return (
    <StoryLayout>
      <Heading color={args.color} type={args.type} {...args}>
        I'm header with type {args.type}
      </Heading>
    </StoryLayout>
  );
};

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

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

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