import React, { useEffect, useRef } from "react";
import { classes } from "../../Autocomplete.tokens";
import { StyledText, Wrapper } from "./SuggestionItem.styles";
export var SuggestionItem = function SuggestionItem(param) {
    var item = param.item, id = param.id, onClick = param.onClick, focused = param.focused, renderItem = param.renderItem;
    var ref = useRef(null);
    var focusedClass = focused ? classes.suggestionItemIsFocused : undefined;
    var handleClick = function handleClick() {
        if (onClick) {
            onClick(item);
        }
    };
    useEffect(function() {
        if (focusedClass && (ref === null || ref === void 0 ? void 0 : ref.current)) {
            ref.current.scrollIntoView({
                behavior: 'smooth',
                block: 'center',
                inline: 'center'
            });
        }
    }, [
        focusedClass
    ]);
    return /*#__PURE__*/ React.createElement(Wrapper, {
        id: id,
        role: "option",
        "aria-selected": focused,
        onClick: handleClick,
        ref: ref,
        className: focusedClass
    }, renderItem ? renderItem(item) : /*#__PURE__*/ React.createElement(React.Fragment, null, item.contentLeft, /*#__PURE__*/ React.createElement(StyledText, null, item.label), item.contentRight));
};
