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

<Meta of={FormattedDocumentStories} />

<Title />
<Subtitle>A lightweight markdown renderer for displaying AI-generated summaries and documentation.</Subtitle>

<Description />

<Primary />

---

## Usage Patterns

### Collapsible Content
Ideal for displaying long AI responses where a "See more" toggle is needed to preserve page verticality.

<Canvas>
  <FormattedDocumentStories.Default />
</Canvas>

---

## AI Best Practices

> [!IMPORTANT]
> - **Markdown Compatibility** — Supports basic markdown: headers (`#`), bold (`**`), lists (`-`), and checkboxes (`- [ ]`). It does not support complex nested tables or markdown-in-html.
> - **Preview Mode** — Use `maxPreviewLength` to control the initial character count before truncation. Defaults to 500.
> - **Safe Injection** — Content is rendered via `dangerouslySetInnerHTML`. Ensure the source content (e.g., from an AI API) is trustable and sanitized if necessary.