import React, { useEffect, useRef } from "react";
import { classes } from "../../Autocomplete.tokens";
import { StyledText, Wrapper } from "./SuggestionItem.styles";
export const SuggestionItem = ({ item, id, onClick, focused, renderItem })=>{
    const ref = useRef(null);
    const focusedClass = focused ? classes.suggestionItemIsFocused : undefined;
    const handleClick = ()=>{
        if (onClick) {
            onClick(item);
        }
    };
    useEffect(()=>{
        if (focusedClass && 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));
};
