
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';

import { Heading }from '../ui-components/Heading';
import { ExampleInfo } from '../ui-components/Heading/ExampleInfo';

export default {
  title: 'Foundation/Heading',
  component: Heading,
} as ComponentMeta<typeof Heading>;

const Template: ComponentStory<typeof Heading> = (args) => {
  return <Heading {...args} />;
};

const InfoTemplate: ComponentStory<typeof Heading> = () => (
  <>
    <ExampleInfo />
    <div
      style={{
        marginTop: "30px",
        display: "flex",
        flexDirection: "column",
        gap: "10px",
      }}
    >
      <Heading level={1}>Heading 1</Heading>
      <Heading level={2}>Heading 2</Heading>
      <Heading level={3}>Heading 3</Heading>
      <Heading level={4}>Heading 4</Heading>
      <Heading level={5}>Heading 5</Heading>
    </div>
  </>
);

export const HeadingDetails = InfoTemplate.bind({});