/**
 * 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, { useEffect } from "react";
import { clsx } from "clsx";
import { parseHighlightMarkup } from "./highlightMarkup";
import { ensureSeekoraStyles } from "../../styles/inject";
export function SuggestionItem({ suggestion, index, isActive, onSelect, className, style, enableHighlightMarkup = true, highlightMarkupOptions, renderHighlight, }) {
    // Inject canonical stylesheet once on mount
    useEffect(() => {
        ensureSeekoraStyles();
    }, []);
    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: style, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: (e) => {
            e.preventDefault();
            onSelect();
        } },
        content,
        suggestion.count != null ? (React.createElement("span", { className: "seekora-suggestions-item-count" }, suggestion.count)) : null));
}
