import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import * as LinkMenuItemStories from './LinkMenuItem.stories';

import LinkMenuItem from '../LinkMenuItem';
import { footerMenusMock } from '../../../../mocks/components/footer';
import { createNamespace } from '../../../tools/namingTools';

export const namespaceString = 'SomeMenu';
export const n = createNamespace(namespaceString);
export const menu = footerMenusMock.BOTTOM_BAR_MENU.menu

<Meta of={LinkMenuItemStories} />

# LinkMenuItem

<br />

## `LinkMenuItems` are menu items that can display either a link or a static title, and can have sub-items.

<br />

### Default

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

### Full menu

<Canvas>
  <Story of={LinkMenuItemStories.FullMenu} />
</Canvas>

### Full menu - horizontal

<Canvas>
  <Story of={LinkMenuItemStories.FullMenuHorizontal} />
</Canvas>

## Usage Example

```jsx
import LinkMenuItem from '@appdirect/sfb-theme-components/src/atoms/link-menu-item/LinkMenuItem';

<LinkMenuItem
    menuItem={item}
    key={item.uuid}
    namespaceString={namespaceString}
    mainItemClassNames={n('col').withTestId().props}
    mainItemSubListClassNames={n('list').withTestId().props}
    childItemClassNames={n('item').withTestId().props}
/>
```

## Props

<ArgsTable of={LinkMenuItem} />
