import React from "react";
import { Story, Meta } from "@storybook/react/types-6-0";

import { ThemeProvider } from "../ThemeProvider";
import Menu, { MenuProps } from "./Menu";

export default {
  title: "Components/Content/Menu",
  component: Menu,
} as Meta;

const Template: Story<MenuProps> = (args) => {
  return (
    <ThemeProvider>
      <Menu {...args} />
    </ThemeProvider>
  );
};

export const Default = Template.bind({});
Default.args = {
  items: [
    { label: "Item One" },
    { label: "Item Two" },
    { label: "Item Three" },
    { label: "Item Four" },
    { label: "Item Five" },
    { label: "Item Six" },
    { label: "Item Seven" },
    { label: "Item Eight" },
    { label: "Item Nine" },
    { label: "Item Ten" },
    { label: "Item Eleven" },
    { label: "Item Twelve" },
  ],
  onItemSelected: () => {
    console.log("select menu item");
  },
};