/**
 * RecentSearchesList – list of recent queries (primitive)
 *
 * Reads recentSearches from context; each click calls selectRecentSearch. 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 RecentSearchItem({ search, onSelect }) {
    const [isHovered, setIsHovered] = React.useState(false);
    return (React.createElement("li", null,
        React.createElement("button", { type: "button", className: clsx('seekora-suggestions-recent-item', isHovered && 'seekora-suggestions-recent-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();
            } }, search.query)));
}
export function RecentSearchesList({ title = 'Recent', maxItems = 8, className, style, listClassName, renderItem, }) {
    const { recentSearches, query, selectRecentSearch } = useSuggestionsContext();
    const items = recentSearches.slice(0, maxItems);
    if (items.length === 0)
        return null;
    return (React.createElement("div", { className: clsx('seekora-suggestions-recent-list', className), style: style },
        title ? (React.createElement("div", { className: "seekora-suggestions-recent-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-recent-ul', listClassName), style: { margin: 0, padding: 0, listStyle: 'none' } }, 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 }));
        }))));
}
