import { jsx as _jsx } from "react/jsx-runtime";
import { useContext } from "react";
import { SelectContext } from "../Select";
import "./style.scss";
import clsx from "clsx";
function SelectItem({ itemValue, children, className = "", dataCy, ...props }) {
    const { onChange, setShowMenu, value } = useContext(SelectContext);
    const areValuesEqual = itemValue === value;
    const selectItemCLSX = clsx({
        selectItemDropdown: true,
        "selectItemDropdown-Active": areValuesEqual,
        "selectItemDropdown-NonActive": !areValuesEqual,
        [`${className}`]: true,
    });
    const optionClick = () => {
        if (!areValuesEqual) {
            onChange(itemValue);
        }
        setShowMenu(false);
    };
    return (_jsx("button", { className: selectItemCLSX, onClick: optionClick, "data-cy": dataCy, ...props, children: children || itemValue }));
}
Object.defineProperty(SelectItem, "selectItemComponent", {
    value: true,
    writable: false,
});
export default SelectItem;
