import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
import * as ThemeToggleStories from './theme-toggle.stories';

<Meta of={ThemeToggleStories} />

<Title />
<Subtitle>Light/dark mode switcher that operates directly on the document root class.</Subtitle>

<Description />

<Primary />

---

## Usage

```tsx
import { ThemeToggle } from 'xertica-ui/brand';

<ThemeToggle />
```

### With Label

```tsx
<ThemeToggle showLabel size="md" variant="outline" />
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
| `variant` | `'default' \| 'outline' \| 'ghost'` | `'ghost'` | Button visual variant |
| `showLabel` | `boolean` | `false` | Show a text label next to the icon |
| `className` | `string` | `''` | Extra CSS classes |

## Behavior

`ThemeToggle` reads and writes the `dark` class on `document.documentElement` directly. It does **not** depend on any context provider — it is fully self-contained and safe to use anywhere in the tree.

## AI Rules

> [!IMPORTANT]
> - **Placement**: Typically placed in the `Sidebar` footer or the `Header` actions area.
> - **Do not use raw JS** — never toggle dark mode manually. Always use this component or `ThemeToggle`.
> - **One instance only** per layout — placing multiple toggles causes conflicting state.