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

<Meta of={CodeBlockStories} />

<Title />
<Subtitle>An elegant syntax highlighter with built-in copy functionality and Xertica branding.</Subtitle>

<Description />

<Primary />

---

## Usage Patterns

### Development Snippets
Ideal for showing code examples with line numbers and filename headers.

<Canvas>
  <CodeBlockStories.Default />
</Canvas>

### Terminal Commands
Compact view for shell commands or configuration highlights.

<Canvas>
  <CodeBlockStories.Simple />
</Canvas>

---

## AI Best Practices

> [!IMPORTANT]
> - **Language Selection** — Always specify the correct `language` prop to ensure accurate syntax highlighting.
> - **Theme Consistency** — The underlying `elegantTheme` automatically maps to the system's CSS theme variables; ensure the `XerticaProvider` is wrapping the application for correct colors.
> - **Clipboard Support** — Copy functionality includes progressive fallbacks for browsers with restricted clipboard permissions.