import Header from '../Header';
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';

export const argTypes = {
  component: Header,
  title: 'Components/Header',
};

<Meta
  title="Components/Header"
  component={Header}
/>

export const HeaderTemplate = createComponentTemplate(Header);

<Heading
  title="Header"
  componentRelativePath="Header/Header.tsx"
/>

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Contribute](#contribute)

## Overview

Header is a component that renders the header of the application.

<Canvas>
  <Story
    name="Overview"
    args={{
      menuOptions: [
        {
          title: 'About',
          icon: 'info',
          onClick: () => window.alert('About clicked'),
        },
      ],
      isReturnEnabled: true,
      isSticky: false,
      onClickReturnButton: () => window.alert('Return clicked'),
    }}
  >
    {HeaderTemplate.bind({})}
  </Story>
</Canvas>

## Props

<ArgsTable of={Header} />

## Contribute

<Footer componentRelativePath="Header/__stories__/header.stories.mdx" />
