/**
 * RecentSearchesList – list of recent queries (primitive)
 *
 * Reads recentSearches from context; each click calls selectRecentSearch. Optional title/render.
 */
import React, { useEffect } from "react";
import { useSuggestionsContext } from "./SuggestionsContext";
import { clsx } from "clsx";
import { ensureSeekoraStyles } from "../../styles/inject";
function RecentSearchItem({ search, onSelect, onAfterActivate, }) {
    return (React.createElement("li", null,
        React.createElement("button", { type: "button", className: "seekora-recent-searches__item", onClick: () => {
                onSelect();
                onAfterActivate?.();
            } }, search.query)));
}
export function RecentSearchesList({ title = "Recent", maxItems = 8, className, style, listClassName, onAfterActivate, renderItem, }) {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const { recentSearches, selectRecentSearch } = useSuggestionsContext();
    const items = recentSearches.slice(0, maxItems);
    if (items.length === 0)
        return null;
    return (React.createElement("div", { className: clsx("seekora-recent-searches", className), style: style },
        title ? (React.createElement("div", { className: "seekora-suggestions-recent-title" }, title)) : null,
        React.createElement("ul", { className: clsx("seekora-suggestions-recent-ul", listClassName) }, items.map((search, i) => {
            const onSelect = () => selectRecentSearch(search);
            if (renderItem) {
                return (React.createElement("li", { key: `${search.query}-${search.timestamp}` }, renderItem(search, i, onSelect)));
            }
            return (React.createElement(RecentSearchItem, { key: `${search.query}-${search.timestamp}`, search: search, onSelect: onSelect, onAfterActivate: onAfterActivate }));
        }))));
}
