Contextual Search

import { ContextualSearch } from '@/components/ui/contextual-search'

export default function Example() {
  const handleSearch = (query: string) => {
    // Perform search
    console.log('Searching for:', query)
  }

  const handleSuggestionClick = (suggestion: { text: string; reason: string }) => {
    // Use the suggestion
    console.log('Selected:', suggestion.text)
  }

  return (
    <>
      {/* With defaults */}
      <ContextualSearch onSearch={handleSearch} />

      {/* Custom configuration */}
      <ContextualSearch
        placeholder="Search projects, tasks, people..."
        recentSearches={['project A', 'team B', 'budget C']}
        aiSuggestions={[
          {
            text: 'Tasks due this week',
            reason: 'Based on your current focus'
          },
          {
            text: 'Team performance',
            reason: 'You check this every Monday'
          }
        ]}
        onSearch={handleSearch}
        onRecentClick={(search) => setQuery(search)}
        onSuggestionClick={handleSuggestionClick}
        onClearRecent={() => clearHistory()}
      />

      {/* Initially closed */}
      <ContextualSearch defaultOpen={false} />
    </>
  )
}