import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Dropdown, DropdownContent, DropdownButton, DropdownClickTrigger, DropdownHoverTrigger, DropdownPosition, } from '../dropdown';
import { useMemo } from 'react';
import Menu, { MenuItem } from '../menu';
var TriggerButtonMap = {
    hover: DropdownHoverTrigger,
    click: DropdownClickTrigger,
};
export var DropdownNav = function (_a) {
    var _b = _a.list, list = _b === void 0 ? [] : _b, _c = _a.trigger, trigger = _c === void 0 ? 'hover' : _c, onItemClick = _a.onItemClick, children = _a.children;
    var TriggerButton = useMemo(function () {
        return TriggerButtonMap[trigger];
    }, [trigger]);
    return (_jsxs(Dropdown, __assign({ className: "zent-dropdown-nav", position: DropdownPosition.BottomSameWidth }, { children: [_jsx(TriggerButton, { children: _jsx(DropdownButton, __assign({ className: 'zent-dropdown-nav-btn', type: "text" }, { children: children }), void 0) }, void 0), _jsx(DropdownContent, { children: _jsx(Menu, __assign({ onClick: onItemClick }, { children: list.map(function (item) { return (_jsx(MenuItem, { children: item.label }, item.key)); }) }), void 0) }, void 0)] }), void 0));
};
