/**
 * SuggestionItem – single text suggestion row (primitive)
 *
 * Highlights when isActive; onClick calls context selectSuggestion.
 * When enableHighlightMarkup is true (default), parses <mark>...</mark> in
 * suggestion text and renders as highlighted <mark> elements. Overridable via
 * renderHighlight, className/style.
 */
import React from 'react';
import { clsx } from 'clsx';
import { parseHighlightMarkup } from './highlightMarkup';
const defaultItemStyle = {
    padding: '10px 12px',
    cursor: 'pointer',
    listStyle: 'none',
    border: 'none',
    width: '100%',
    textAlign: 'left',
    fontSize: 'inherit',
    fontFamily: 'inherit',
    backgroundColor: 'transparent',
    color: 'inherit',
    transition: 'background-color 120ms ease',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
};
export function SuggestionItem({ suggestion, index, isActive, onSelect, className, style, enableHighlightMarkup = true, highlightMarkupOptions, renderHighlight, }) {
    const [isHovered, setIsHovered] = React.useState(false);
    const displayText = suggestion.highlightedQuery ?? suggestion.query;
    const content = renderHighlight != null
        ? renderHighlight(displayText)
        : enableHighlightMarkup
            ? parseHighlightMarkup(displayText ?? '', highlightMarkupOptions)
            : (suggestion.query ?? displayText ?? '');
    const showHighlight = isActive || isHovered;
    return (React.createElement("li", { role: "option", "aria-selected": isActive, id: `seekora-suggestion-${index}`, className: clsx('seekora-suggestions-item', isActive && 'seekora-suggestions-item--active', isHovered && 'seekora-suggestions-item--hover', className), style: {
            ...defaultItemStyle,
            ...(showHighlight ? { backgroundColor: 'var(--seekora-bg-hover, rgba(0,0,0,0.05))' } : {}),
            ...style,
        }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: (e) => {
            e.preventDefault();
            onSelect();
        } },
        content,
        suggestion.count != null ? (React.createElement("span", { className: "seekora-suggestions-item-count", style: { marginLeft: 8, color: 'inherit', opacity: 0.6, fontSize: '0.875em' } }, suggestion.count)) : null));
}
