import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import './SearchBar.scss';
import {memo} from "@wordpress/element";

const SearchBar = ({ handleSearch, searchableColumns }) => {
    const [debounceTimer, setDebounceTimer] = useState(null);

    const onKeyUp = (event) => {
        clearTimeout(debounceTimer);
        setDebounceTimer(setTimeout(() => {
            handleSearch(event.target.value, searchableColumns)
        }, 500));
    };

    return (
        <div className="rsssl-search-bar">
            <div className="rsssl-search-bar__inner">
                <div className="rsssl-search-bar__icon"></div>
                <input
                    type="text"
                    className="rsssl-search-bar__input"
                    placeholder={__("Search", "really-simple-ssl")}
                    onKeyUp={onKeyUp}
                />
            </div>
        </div>
)
}

export default memo(SearchBar);