import * as React from "react";
import { SearchProviderResults } from "./SearchProviderResults";
import { SearchBestMatch } from "./SearchBestMatch";
import { useSearch } from "../../hooks/useSearch";
import "../../assets/css/menus.css";
export const SearchResults = () => {
    const { searchResults, searchQuery } = useSearch();
    // If we had a response from the search client
    // first check that there is search query or results is not empty
    if (searchQuery === "" || !(searchResults === null || searchResults === void 0 ? void 0 : searchResults.length)) {
        const message = searchQuery && searchQuery !== "" ? "No results" : "Results will display here";
        return React.createElement("div", { className: "menu-item no-hover informational-state" }, message);
    }
    else {
        return (
        // pull out best match into its own component.
        React.createElement("div", { className: "search-provider-results" },
            React.createElement(SearchBestMatch, null),
            searchResults.map((r, i) => (React.createElement(SearchProviderResults, { key: i, providerResponse: r })))));
    }
};
//# sourceMappingURL=SearchResults.js.map