import * as React from "react";
import { storiesOf } from "@storybook/react";
import { MenuButton } from "../src/index";

const { Item } = MenuButton;
const menu = ["Undo", "Redo", "Cut", "Copy", "Paste"].map((item) => (
  <Item key={item}>{item}</Item>
));

storiesOf("MenuButton", module).add("MenuButton", () => {
  return (
    <div id='app-wrapper'>
      <div id='app'>
        <MenuButton label='Document Edit'>{menu}</MenuButton>
        &nbsp;&nbsp;
        <MenuButton type='primary' label='Document Edit'>
          {menu}
        </MenuButton>
        &nbsp;&nbsp;
        <MenuButton type='secondary' label='Document Edit'>
          {menu}
        </MenuButton>
        <br />
        <br />
        <MenuButton text label='Document Edit'>
          {menu}
        </MenuButton>
        &nbsp;&nbsp;
        <MenuButton text type='primary' label='Document Edit'>
          {menu}
        </MenuButton>
        &nbsp;&nbsp;
        <MenuButton text type='secondary' label='Document Edit'>
          {menu}
        </MenuButton>
      </div>
    </div>
  );
});
