/**
 * TrendingList – list of trending searches (primitive)
 *
 * Reads trendingSearches from context; each click calls selectTrendingSearch. Optional title/render.
 */
import React, { useEffect } from "react";
import { useSuggestionsContext } from "./SuggestionsContext";
import { clsx } from "clsx";
import { ensureSeekoraStyles } from "../../styles/inject";
function TrendingItem({ trending, onSelect, onAfterActivate, }) {
    return (React.createElement("li", null,
        React.createElement("button", { type: "button", className: "seekora-trending-list__item", onClick: () => {
                onSelect();
                onAfterActivate?.();
            } },
            trending.query,
            trending.count != null ? (React.createElement("span", { className: "seekora-trending-list__icon" }, trending.count)) : null)));
}
export function TrendingList({ title = "Trending", maxItems = 8, className, style, listClassName, onAfterActivate, renderItem, }) {
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    const { trendingSearches, selectTrendingSearch } = useSuggestionsContext();
    const items = trendingSearches.slice(0, maxItems);
    if (items.length === 0)
        return null;
    return (React.createElement("div", { className: clsx("seekora-trending-list", className), style: style },
        title ? (React.createElement("div", { className: "seekora-suggestions-trending-title" }, title)) : null,
        React.createElement("ul", { className: clsx("seekora-suggestions-trending-ul", listClassName) }, items.map((trending, i) => {
            const onSelect = () => selectTrendingSearch(trending, i);
            if (renderItem) {
                return (React.createElement("li", { key: `${trending.query}-${i}` }, renderItem(trending, i, onSelect)));
            }
            return (React.createElement(TrendingItem, { key: `${trending.query}-${i}`, trending: trending, onSelect: onSelect, onAfterActivate: onAfterActivate }));
        }))));
}
