import React, { ReactChild } from 'react';
import { Meta, Story } from '@storybook/react/types-6-0';
import { Heading, HeadingProps } from '.';

export default {
  title: 'Heading',
  component: Heading,
} as Meta;

const Template: Story<HeadingProps> = (args) => <Heading {...args} />;

export const Default = Template.bind({});
Default.args = { children: 'Default' } as HeadingProps & {
  children?: ReactChild;
};

export const Variants = () => (
  <>
    <Heading variant="h1">H1</Heading>
    <Heading variant="h2">H2(default)</Heading>
    <Heading variant="h3">H3</Heading>
    <Heading variant="h4">H4</Heading>
    <Heading variant="h5">H5</Heading>
  </>
);
