import React from 'react'
import { Story, Meta } from '@storybook/react'
import { TextContainer, TextContainerProps } from './TextContainer'

export default {
  title: 'Titles and text/TextContainer',
  component: TextContainer,
  argTypes: {
    leading: {
      name: 'leading',
      description: 'Controls the font line height',
      type: { name: 'string', required: false },
      control: {
        type: 'select',
        options: ['normal', 'loose', 'tight']
      }
    },
    alignment: {
      name: 'alignment',
      description: 'Controls the text alignment',
      type: { name: 'string', required: false },
      control: {
        type: 'select',
        options: ['left', 'center', 'right', 'justify']
      }
    }
  }
} as Meta

const Template: Story<TextContainerProps> = (args: any) => {
  return (
    <TextContainer {...args}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada
      molestie tempor. Curabitur tincidunt quis lorem ut maximus. Morbi
      consequat metus nec nisl rutrum ornare. Sed mauris leo, mattis in euismod
      ut, maximus id ex. Suspendisse auctor eleifend commodo.
    </TextContainer>
  )
}

export const Default = Template.bind({})
