/**
 * TrendingList – list of trending searches (primitive)
 *
 * Reads trendingSearches from context; each click calls selectTrendingSearch. Optional title/render.
 */
import React from 'react';
import { useSuggestionsContext } from './SuggestionsContext';
import { clsx } from 'clsx';
const itemStyle = {
    padding: '10px 12px',
    cursor: 'pointer',
    border: 'none',
    width: '100%',
    textAlign: 'left',
    fontSize: 'inherit',
    fontFamily: 'inherit',
    backgroundColor: 'transparent',
    color: 'inherit',
    transition: 'background-color 120ms ease',
};
function TrendingItem({ trending, onSelect }) {
    const [isHovered, setIsHovered] = React.useState(false);
    return (React.createElement("li", null,
        React.createElement("button", { type: "button", className: clsx('seekora-suggestions-trending-item', isHovered && 'seekora-suggestions-trending-item--hover'), style: {
                ...itemStyle,
                ...(isHovered ? { backgroundColor: 'var(--seekora-bg-hover, rgba(0,0,0,0.05))' } : {}),
            }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: (e) => {
                e.preventDefault();
                onSelect();
            } },
            trending.query,
            trending.count != null ? (React.createElement("span", { style: { marginLeft: 8, color: 'inherit', opacity: 0.6, fontSize: '0.875em' } }, trending.count)) : null)));
}
export function TrendingList({ title = 'Trending', maxItems = 8, className, style, listClassName, renderItem, }) {
    const { trendingSearches, selectTrendingSearch } = useSuggestionsContext();
    const items = trendingSearches.slice(0, maxItems);
    if (items.length === 0)
        return null;
    return (React.createElement("div", { className: clsx('seekora-suggestions-trending-list', className), style: style },
        title ? (React.createElement("div", { className: "seekora-suggestions-trending-title", style: { padding: '8px 12px', fontSize: '0.75rem', fontWeight: 600, color: 'inherit', opacity: 0.6, textTransform: 'uppercase' } }, title)) : null,
        React.createElement("ul", { className: clsx('seekora-suggestions-trending-ul', listClassName), style: { margin: 0, padding: 0, listStyle: 'none' } }, 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 }));
        }))));
}
