import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ToggleArrow } from "../../../../../../components/index.js";
import { getMediaImage } from "../../../../../../components/Media/Image/utils.js";
import { block } from "../../../../../../utils/index.js";
import NavigationPopup from "../../../NavigationPopup/NavigationPopup.js";
import { ContentWrapper } from "../ContentWrapper/ContentWrapper.js";
import './NavigationDropdown.css';
const b = block('navigation-dropdown');
const TOGGLE_ARROW_SIZE = 12;
export const NavigationDropdown = ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }) => {
    const iconData = icon && getMediaImage(icon);
    const anchorRef = React.useRef(null);
    return (_jsxs(React.Fragment, { children: [_jsxs("button", { ref: anchorRef, ...props, type: "button", className: b(null, className), "aria-expanded": isActive, children: [_jsx(ContentWrapper, { text: text, icon: iconData, iconSize: iconSize, "aria-expanded": isActive }), _jsx(ToggleArrow, { className: b('arrow'), size: TOGGLE_ARROW_SIZE, type: 'vertical', iconType: "navigation", open: isActive })] }), _jsx(NavigationPopup, { open: isActive, onClose: hidePopup, items: items, anchorRef: anchorRef })] }));
};
//# sourceMappingURL=NavigationDropdown.js.map
