import { KeyboardEvent } from 'react';
import { AppMode } from '../types';
interface SearchBoxProps {
query: string;
mode: AppMode;
onQueryChange: (query: string) => void;
onSearch: () => void;
onBrowse: () => void;
onConsult: () => void;
onReflect: () => void;
onGraph: () => void;
onLearn: () => void;
}
export function SearchBox({
query,
mode,
onQueryChange,
onSearch,
onBrowse,
onConsult,
onReflect,
onGraph,
onLearn,
}: SearchBoxProps) {
const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
onSearch();
}
};
return (
<div className="search-box">
<input
type="text"
placeholder="Search Oracle knowledge..."
value={query}
onChange={(e) => onQueryChange(e.target.value)}
onKeyPress={handleKeyPress}
autoFocus
/>
<button onClick={onSearch}>Search</button>
<button
className={`btn-secondary ${mode === 'browse' ? 'active' : ''}`}
onClick={onBrowse}
>
Browse
</button>
<button
className={`btn-secondary ${mode === 'consult' ? 'active' : ''}`}
onClick={onConsult}
>
Consult
</button>
<button
className={`btn-secondary ${mode === 'reflect' ? 'active' : ''}`}
onClick={onReflect}
>
Reflect
</button>
<button
className={`btn-secondary ${mode === 'graph' ? 'active' : ''}`}
onClick={onGraph}
>
Graph
</button>
<button className="btn-secondary" onClick={onLearn}>
Learn
</button>
</div>
);
}
