import React from 'react';
import {useShopStore} from "./shop_store";

export function SearchBar() {
    const search_bar_value = useShopStore((state) => state.search_bar_value);
    const updateSearchBar = useShopStore((state) => state.updateSearchBar);
    return (
        <div className="search-catalog form-outline">
            <input type="search"
                   id="search_bar"
                   className="search-catalog-input form-control"
                   placeholder="Search"
                   value={search_bar_value}
                   onChange={event => updateSearchBar(event.target.value)}
                   aria-label="Search"/>
        </div>
    )
}