//import 'SearchBar.css'
import { useState } from 'react';

function SearchBar({ onSearch }) {
    const [query, setQuery] = useState('');

    const handleSearch = (e) => {
        e.preventDefault();
        onSearch(query);
    };

    return (
        <div className='search-bar'>
            <form onSubmit={handleSearch}>
                <input
                    type='text'
                    placeholder='Search articles by title, content, or KA number...'
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}

                    /*  USer this for instant search
                    onChange={(e) => {
                        setQuery(e.target.value);
                        onSearch(e.target.value);
                    }}
                    */
    
                />
                <button type='submit'>Search</button>
            </form>
        </div>
    );
}

export default SearchBar