import { Canvas, Meta } from '@storybook/blocks'
import * as Stories from './CodeSnippetField.stories'

<Meta of={Stories} />

# CodeSnippetField

Displays code with Shiki syntax highlighting. Automatically adapts to light/dark themes.

## Usage

```tsx
import { CodeSnippetField } from '@/components/onboarding'

<CodeSnippetField
  title="Install the SDK"
  description="Run this command in your terminal"
  code="npm install @acme/sdk"
  language="bash"
  showCopyButton
/>
```

## Props

- `code`: The code string to display (required)
- `language`: Programming language for highlighting (default: `'typescript'`)
- `title`: Optional title above the code block
- `description`: Optional helper text
- `showLineNumbers`: Show line numbers (default: `false`)
- `showCopyButton`: Show copy button (default: `true`)
- `copyButtonText`: Custom copy button text (default: `'Copy'`)
- `copiedText`: Custom copied confirmation (default: `'Copied!'`)

## Supported Languages

TypeScript, JavaScript, Python, Bash, JSON, HTML, CSS, Go, Rust, and many more via Shiki.

## Examples

### Bash Command

<Canvas of={Stories.Default} />

### TypeScript

<Canvas of={Stories.TypeScript} />

### Python

<Canvas of={Stories.Python} />

### cURL Example

<Canvas of={Stories.Bash} />

### JSON Response

<Canvas of={Stories.JSON} />

### With Line Numbers

<Canvas of={Stories.WithLineNumbers} />

### Custom Copy Text

<Canvas of={Stories.CustomCopyText} />