import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
import * as TemplatePageStories from './TemplatePage.stories';

<Meta of={TemplatePageStories} />

<Title>TemplatePage</Title>
<Subtitle>Full application shell with the component kitchen-sink reference.</Subtitle>

---

## Overview

`TemplatePage` is the reference implementation of the full application layout. It assembles:

- **Sidebar** - Primary navigation.
- **TemplateContent** - Kitchen-sink showcase of Xertica UI components.
- **XerticaAssistant** - Floating AI assistant panel.

When `XerticaProvider` is present, the page synchronizes sidebar width, sidebar expansion, and assistant visibility through `LayoutContext`. Without the provider, it renders with local fallback layout state.

**Requires:** React Router v6. `XerticaProvider` is recommended for app-level synchronization.

---

## Props

| Prop | Type | Required | Description |
|---|---|---|---|
| `user` | `{ email: string } \| null` | Yes | Currently authenticated user. Passed to Sidebar for avatar and user menu display. |
| `onLogout` | `() => void` | Yes | Called when the user triggers logout from the Sidebar. |

---

## Composition

```tsx
import { TemplatePage } from 'xertica-ui';

<Route
  path="/template"
  element={<TemplatePage user={currentUser} onLogout={handleLogout} />}
/>
```

---

## AI Best Practices

> [!IMPORTANT]
> - **Reference implementation** - Use `TemplatePage` as the primary reference for assembling complex layouts.
> - **Top-level only** - This is a full-screen layout component. Do not nest it inside other layouts.
> - **Provider fallback** - The page renders without `XerticaProvider`, but the provider is recommended for synchronized app layout.
> - **Extend via TemplateContent** - To change showcased components, edit `TemplateContent`.