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

<Meta of={Stories} />

# SearchBox

A command palette for searching documentation with keyboard navigation, relevance ranking, and query highlighting.

## Usage

```tsx
import {
  SearchProvider,
  SearchPalette,
  SearchTrigger,
  useSearchContext,
} from '@/components/searchbox'

const documents = [
  {
    id: '1',
    title: 'Getting Started',
    url: '/docs/getting-started',
    breadcrumbs: ['Guides'],
    matches: [
      { type: 'content', snippet: 'Learn how to get started...' },
      { type: 'section', heading: 'Installation', snippet: 'Install the package...' },
    ],
  },
]

function App() {
  return (
    <SearchProvider documents={documents}>
      <SearchTrigger onClick={() => {}} />
      <SearchPalette placeholder="Search documentation..." />
    </SearchProvider>
  )
}
```

## Keyboard Shortcuts

| Key | Action |
|-----|--------|
| `⌘K` / `Ctrl+K` | Open/close palette |
| `↑` `↓` | Navigate results |
| `Enter` | Select result |
| `Escape` | Close palette |

## Components

| Component | Description |
|-----------|-------------|
| `SearchProvider` | Context provider that manages search state |
| `SearchPalette` | Modal command dialog with search input and results |
| `SearchTrigger` | Button that opens the palette |
| `useSearchContext` | Hook to access search state |

## Examples

### Default (Trigger Button)

Click the button or press ⌘K to open the command palette.

<Canvas of={Stories.Default} />

### Palette Open

Command palette ready for search input.

<Canvas of={Stories.PaletteOpen} />

### With Results

Search results with query highlighting and relevance ranking.

<Canvas of={Stories.WithResults} />

### No Results

Empty state when no documents match the query.

<Canvas of={Stories.NoResults} />

### Custom Placeholder

Custom placeholder text in the search input.

<Canvas of={Stories.CustomPlaceholder} />