import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { TableContentFromObject, FormOutput } from '../../../tools/docTools';
import { headerDataMock, headerDataMockLoggedIn, headerSettingsFullMocks } from '../../../../mocks/components/header';
import Header from '../Header';
import * as HeaderStories from './Header.stories';

export const settingsDocs = {};

<Meta of={HeaderStories} />

# Header

<br />

## `Headers` are used as the main Header for a document or page.

<br />

### Default

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

### With user logged in

<Canvas>
  <Story of={HeaderStories.WithUserLoggedIn} />
</Canvas>

## Usage Example

```jsx
import Header from '@appdirect/sfb-theme-components/src/components/header/Header';

<Header />
```

## Props

<ArgsTable of={Header} />

## Schema

### Form Settings

<table>
  <TableContentFromObject obj={settingsDocs} />
</table>

### Form Output

<FormOutput code={Header.schema().form} />
