import {
  ArgsTable,
  Meta,
  Canvas,
  Preview,
  Source,
  Story,
  Title,
  Subtitle
} from '@storybook/addon-docs'
import { story, params } from '~storybook/utils'
import { MpBox } from '@mekari/pixel'
import { boxArgTypes } from './box.argtypes'
import MultipleBox from './previews/MultipleBox'
import CustomBox from './previews/CustomBox'

<Meta title="Components/Box" />

<Title>Box</Title>
<Subtitle>
  The Box component is the most abstract component on top of all other Pixel components.{' '}
</Subtitle>
<Badge component="pixel-box" spacing="-12px 0 40px 0" />
<Source code={`import { MpBox } from '@mekari/pixel'`} format={true} />

### **Playground**

export const BoxPlayground = (args, { argTypes }) => {
  return {
    components: { MpBox },
    props: Object.keys(argTypes),
    template: `
      <mp-box
        v-bind="$props"
        border="1px"
        p="5"
        m="5"
        rounded="sm"
        color="blue.700"
      />`
  }
}

<Canvas withToolbar={true}>
  <Story
    name="Playground"
    argTypes={boxArgTypes}
    inline={true}
  >
    {BoxPlayground}
  </Story>
</Canvas>

### **API**

#### **MpBox**

<ArgsTable story="Playground" />

### **Usage**

#### **Multiple Box**

<Preview>
  <Story name="Multiple Box" parameters={params(MultipleBox, false, true)}>
    {story(MultipleBox)}
  </Story>
</Preview>

#### **Custom Box**

By default, `MpBox` renders to `div` element. With `as` prop you can override it to other HTML elements such as `section`,`nav`, etc.

<Preview isExpanded={true}>
  <Story name="Custom Box" parameters={params(CustomBox, false, true)}>
    {story(CustomBox)}
  </Story>
</Preview>

### **Reference**

- Box component can pass with <a href=".?path=/docs/start-style-props--page" target="_blank">Style Props</a>.