import {ComponentMeta, ComponentStory} from '@storybook/react';
import Heading from './Heading';
import {Center} from 'native-base';

export default{
  title: 'App/Typography/Heading',
  component: Heading,
  argsTypes: {
    size: {
      control: {
        type: 'select',
        options: ['xs', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
      },
      description: "Select takes many sizes",
      defaultValue: 'lg'
    },
    fontStyle: 'italic',
  }

} as ComponentMeta<typeof Heading>

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

export const Default = Template.bind({});

Default.args = {
  size: 'lg'
}