import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ShortenedText } from "../../../ShortenedText/ShortenedText.js";
import { UiIcon } from "../../UiIcon/UiIcon.js";
import { UiTooltip } from "../../UiTooltip/UiTooltip.js";
import { e } from "../listboxBem.js";
/**
 * @internal
 */
export function DefaultUiListboxInteractiveItemComponent({ item, isFocused, isSelected, isCompact, onSelect, }) {
    return (_jsxs("div", { className: e("item", {
            isFocused,
            isSelected,
            isCompact,
            isDisabled: !!item.isDisabled,
        }), onClick: item.isDisabled ? undefined : onSelect, children: [item.icon ? _jsx(UiIcon, { type: item.icon, size: 14, color: "complementary-7" }) : null, _jsx(ShortenedText, { className: e("item-title"), ellipsisPosition: "end", children: item.stringTitle }), item.tooltip ? (_jsx(UiTooltip, { anchor: _jsx("div", { className: e("item-explanation"), children: _jsx(UiIcon, { type: "question", size: 14, color: "complementary-7" }) }), content: item.tooltip, triggerBy: ["hover", "focus"], arrowPlacement: "left", optimalPlacement: true, width: 200, offset: 10 })) : null] }));
}
