import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import DropDownMenu from '../components/Ui/dropDown/DropDown'
import Icons from '../constants/IconArray.js';



// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'UI elements/Dropdown Menu',
  component: DropDownMenu,
  // Sets the layout parameter component wide.
  parameters: {
    layout: 'centered',
  },
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    size: {defaultValue: 'default', control:{ type:"select", options:["default", "small", "medium", "large"]}},
    iconName: {defaultValue: 'person',control:{type: 'select', options:Icons}},
    variant: {defaultValue: 'default', control:{ type:"select", options:["default", "primary", "secondary"]}},
    placement: {defaultValue: 'bottom', control:{ type:"select", options:["top", "bottom"]}},
  },
} as ComponentMeta<typeof DropDownMenu>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof DropDownMenu> = (args) => <DropDownMenu {...args} />;

export const DropDownClick = Template.bind({});
DropDownClick.args = {
  label: 'Dropdown Menu Click',
  clickable: true,
};

export const DropDownHover = Template.bind({});
DropDownHover.args = {
  label: 'Dropdown Menu Hover',
  clickable: false,
};