import React from 'react'

import { Stack } from './Stack'

export default {
  title: 'Structure/Stack',
  component: Stack,
  argTypes: {
    items: {
      name: 'items',
      description:
        "Controls how the items are positioned along the container's cross axis",
      type: { name: 'string', required: false },
      control: {
        type: 'select',
        options: ['start', 'end', 'center', 'baseline', 'stretch']
      }
    },
    justify: {
      name: 'justify',
      description:
        "Controls how the items are positioned along the container's main axis",
      type: { name: 'string', required: false },
      control: {
        type: 'select',
        options: ['start', 'end', 'center', 'between', 'around', 'evenly']
      }
    },
    direction: {
      name: 'direction',
      description: 'Controls the direction of the items',
      type: { name: 'string', required: false },
      control: {
        type: 'select',
        options: ['row', 'row-reverse', 'col', 'col-reverse']
      }
    },
    noWrap: {
      name: 'noWrap',
      description: 'Controls if the items will wrap ',
      type: { name: 'boolean', required: false },
      control: { type: 'boolean' }
    },
    spacing: {
      name: 'spacing',
      description: 'Controls the space between  items ',
      type: { name: 'string', required: false },
      control: {
        type: 'select',
        options: [
          'extraTight',
          'tight',
          'baseTight',
          'loose',
          'extraLoose',
          'none'
        ]
      }
    }
  }
}

const Template = (args: any) => {
  return (
    <Stack {...args}>
      <Stack.Item>First</Stack.Item>
      <Stack.Item>Second</Stack.Item>
      <Stack.Item>Third</Stack.Item>
    </Stack>
  )
}

export const Default = Template.bind({})
