import useTranslateValue from "../../Utils/Translation";
import React, { useState } from "react";
const DropdownButton = ({ title, dropdownOptions, onButtonClick, }) => {
    var _a;
    const { translateString } = useTranslateValue();
    const [isOpen, setIsOpen] = useState(false);
    const toggleDropdown = () => {
        setIsOpen(!isOpen);
    };
    return (React.createElement("div", { className: "inline-flex rounded-md shadow-sm" },
        React.createElement("button", { type: "button", className: "relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10", onClick: onButtonClick }, (_a = translateString(title)) !== null && _a !== void 0 ? _a : title),
        React.createElement("div", { className: "relative -ml-px block" },
            React.createElement("button", { type: "button", className: "relative inline-flex items-center rounded-r-md bg-white px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10", id: "option-menu-button", "aria-expanded": isOpen, "aria-haspopup": "true", onClick: toggleDropdown },
                React.createElement("span", { className: "sr-only" }, "Open options"),
                React.createElement("svg", { className: "size-5", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" },
                    React.createElement("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }))),
            isOpen && (React.createElement("div", { className: "absolute right-0 z-10 -mr-1 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none", role: "menu", "aria-orientation": "vertical", "aria-labelledby": "option-menu-button" },
                React.createElement("div", { className: "py-1", role: "none" }, dropdownOptions.map((option, index) => {
                    var _a;
                    return (React.createElement("a", { key: index, href: "#", className: "block px-4 py-2 text-sm text-gray-700", role: "menuitem", onClick: option.onClick }, (_a = translateString(option.label)) !== null && _a !== void 0 ? _a : option.label));
                })))))));
};
export default DropdownButton;
//# sourceMappingURL=DropdownButton.js.map