import "./SearchBar.scss";
import Image from "next/image";
import search_icon from "./icons/search-icon.svg";

interface ISearchBar {
  placeholder?: string;
  style?: object;
  value: string;
  setValue: (search: string) => any;
}

const SearchBar: React.FC<ISearchBar> = ({
  placeholder,
  style,
  value,
  setValue,
}: ISearchBar) => {
  return (
    <div style={style} className="search-bar">
      <div className="search-bar__input">
        <Image src={search_icon} alt="Search Icon" />
        <input
          value={value}
          onChange={(e) => setValue(e.target.value)}
          type="text"
          placeholder={placeholder}
        />
      </div>
      <button>Поиск</button>
    </div>
  );
};

export default SearchBar;
