import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';

<Meta title="Pages/TemplateContent" />

<Title>TemplateContent</Title>
<Subtitle>Kitchen-sink showcase and CLI starter template demonstrating the full Xertica UI component set.</Subtitle>

---

## Overview

`TemplateContent` is a comprehensive living demo that assembles the majority of Xertica UI primitives into a single scrollable page. It serves two purposes:

1. **Development reference** - Shows the correct composition patterns for every major component.
2. **CLI starter** - Acts as the baseline when scaffolding a new application page.

It includes interactive showcases for cards, tabs, forms, tables, dialogs, alerts, progress, sliders, maps, headers, and sidebars.

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

{ path: '/template', element: <TemplateContent /> }
```

---

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `user` | `{ name?: string; email?: string; avatar?: string } \| null` | - | Currently authenticated user for the header. |
| `onLogout` | `() => void` | - | Logout handler forwarded to the header. |
| `onSettings` | `() => void` | - | Settings handler forwarded to the header. |

---

## Layout Dependency

`TemplateContent` uses optional layout state. When wrapped in `XerticaProvider`, it synchronizes sidebar width, expanded state, and layout controls. Without the provider, it renders with local fallback sidebar state.

React Router is still required because the showcase uses `Link` and `useNavigate`.

---

## Sidebar Showcase

`TemplateContent` includes an embedded, interactive `Sidebar` preview with controls for:

- Toggling footer sections.
- Adjusting sidebar width via a `Slider`.
- Switching between `variant="assistant"` and `variant="default"` modes.

---

## AI Best Practices

> [!IMPORTANT]
> - **Reference first** - Before building a new page, check `TemplateContent` for the correct composition pattern.
> - **Provider fallback** - `TemplateContent` renders without `XerticaProvider`, but the provider is recommended for synchronized layout state.
> - **Router requirement** - React Router is still required for navigation hooks and links.
> - **Map section** - The Maps showcase requires a valid `googleMapsApiKey` passed to `XerticaProvider`.