import { boolean, number, withKnobs } from '@storybook/addon-knobs'
import React from 'react'
import { Button } from '../Button'
import { SideMenu } from '.'

export const sideMenu = () => (
  <React.Fragment>
    <SideMenu
      mode="squeeze"
      isOpen={boolean('isOpen', false)}
      duration={number('duration', 500, {
        range: true,
        min: 0,
        max: 5000,
        step: 50,
      })}
    >
      <Button>Login</Button>
    </SideMenu>
    <SideMenu
      mode="overlay"
      isOpen={boolean('isOpen', false)}
      duration={number('duration', 500, {
        range: true,
        min: 0,
        max: 5000,
        step: 50,
      })}
      side="left"
    >
      <Button>Login</Button>
    </SideMenu>
  </React.Fragment>
)

export default {
  component: SideMenu,
  title: 'SideMenu',
  decorators: [withKnobs],
}