import React from 'react'
import Box from '../components/Box'

export default {
  title: 'Layout/Box',
  component: Box,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
    backgrounds: {
      default: 'gray',
      values: [
        {
          name: 'gray',
          value: '#f8f8f8',
        },
      ],
    },
  },
  argTypes: {
    children: {
      description: 'Adiciona um children.',
    },
    size: {
      description: 'Definir o tamanho do componente.',
      options: ['small', 'medium', 'large'],
      control: { type: 'radio' },
    },
  },
}

export const Default = (args) => (
  <Box {...args}>
    <p>Conteudo</p>
  </Box>
)

Default.args = {
  size: 'medium',
}