import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import MenuDropdown from '../menuDropdown';
import * as MenuDropdownStories from './menuDropdown.stories';

export const items = [
    {
        isDisabled: false,
        isVisible: true,
        link: {
            value: 'http://www.google.ca/',
            isLocalized: true,
            type: 'INPUT'
        },
        openInNewTab: false,
        title: {
            value: 'Untitled 1',
            isLocalized: true,
            type: 'INPUT'
        },
        type: 'CUSTOM_LINK',
        uuid: '9be402d7-9aca-44e1-a5eb-b1c15327f64d'
    },
    {
        isDisabled: false,
        isVisible: true,
        link: {
            value: 'http://www.google.ca/',
            isLocalized: true,
            type: 'INPUT'
        },
        openInNewTab: false,
        title: {
            value: 'Untitled 2',
            isLocalized: true,
            type: 'INPUT'
        },
        type: 'CUSTOM_LINK',
        uuid: '9be402d7-9aca-44e1-a5eb-b1c15327f68d'
    }
];

<Meta of={MenuDropdownStories} />

# MenuDropdown

<br />

## `MenuDropdown` are ideal to display menuItems on hover.

<br />

### Default

<Canvas>
  <Story of={MenuDropdownStories.Default} />
</Canvas>

## Usage Example

```jsx
import MenuDropdown from '@appdirect/sfb-theme-components/src/atoms/menu-dropdown/MenuDropdown';

<MenuDropdown items={items} />

```

## Props

<ArgsTable of={MenuDropdown} />
