import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';

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 title="Atoms/LinkMenuItem" component={LinkMenuItem} />

# 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 name="Default">
        <LinkMenuItem
            menuItem={menu[0]}
            key={menu[0].uuid}
            namespaceString={namespaceString}
            mainItemClassNames={n('col').withTestId().props}
            mainItemSubListClassNames={n('list').withTestId().props}
            childItemClassNames={n('item').withTestId().props}
        />
    </Story>
</Canvas>

### Full menu
<Canvas>
    <Story name="Full menu">
        {menu.map(item => (
            <LinkMenuItem
                menuItem={item}
                key={item.uuid}
                namespaceString={namespaceString}
                mainItemClassNames={n('col').withTestId().props}
                mainItemSubListClassNames={n('list').withTestId().props}
                childItemClassNames={n('item').withTestId().props}
            />
        ))}
    </Story>
</Canvas>

### Full menu - horizontal
<Canvas>
    <Story name="Full menu - horizontal">
        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
            {menu.map(item => (
                <LinkMenuItem
                    menuItem={item}
                    key={item.uuid}
                    namespaceString={namespaceString}
                    mainItemClassNames={n('col').withTestId().props}
                    mainItemSubListClassNames={n('list').withTestId().props}
                    childItemClassNames={n('item').withTestId().props}
                />
            ))}
        </div>
    </Story>
</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} />
