import React, {ReactNode, useEffect, useMemo, useState} from 'react';
import "./search-bar.scss";
import {debounce} from "../../../helpers/functions";

type SearchBarProps = {
    onSearch: (searchTerm: string) => void;
    placeholder?: string
    children: ReactNode;
    value?: string
};

const SearchBar = ({onSearch, placeholder, children, value=''}: SearchBarProps) => {
    const [searchTerm, setSearchTerm] = useState(value);


   useEffect(()=>{

       const timeout = setTimeout(()=>{

           onSearch(searchTerm)

       },600)

       return () => clearTimeout(timeout)
   },[searchTerm])

    return (
        <div className={"search-bar"} id={"search-bar"}>
            {children}
            <input
                type="text"
                placeholder={placeholder}
                value={searchTerm}
                onChange={(e) => {
                    setSearchTerm(e.target.value)
                }}
            />
        </div>
    );
};

export default SearchBar;