import Icon from "../Icon/Icon";
import useTranslateValue from "../../Utils/Translation";
import IconProp from "../../../Types/Icon/IconProp";
import React, { useState } from "react";
const SideMenuSection = (props) => {
    var _a;
    const { translateString } = useTranslateValue();
    const [isCollapsed, setIsCollapsed] = useState(props.defaultCollapsed || false);
    const translatedTitle = translateString(props.title) || props.title;
    const isCollapsible = (_a = props.collapsible) !== null && _a !== void 0 ? _a : true;
    const handleToggle = () => {
        if (isCollapsible) {
            setIsCollapsed(!isCollapsed);
        }
    };
    return (React.createElement("div", { className: "mb-2" },
        React.createElement("button", { type: "button", onClick: handleToggle, className: `w-full flex items-center justify-between px-2 py-1.5 rounded-lg transition-colors duration-150 ${isCollapsible ? "hover:bg-gray-50 cursor-pointer" : "cursor-default"}`, "aria-expanded": !isCollapsed },
            React.createElement("div", { className: "flex items-center gap-2" },
                props.icon && (React.createElement(Icon, { icon: props.icon, className: "h-4 w-4 text-gray-400" })),
                React.createElement("h6", { className: "text-xs font-semibold uppercase tracking-wider text-gray-500" }, translatedTitle)),
            isCollapsible && (React.createElement(Icon, { icon: IconProp.ChevronDown, className: `h-4 w-4 text-gray-400 transition-transform duration-200 ${isCollapsed ? "-rotate-90" : "rotate-0"}` }))),
        React.createElement("div", { className: `overflow-hidden transition-all duration-200 ease-in-out ${isCollapsed ? "max-h-0 opacity-0" : "max-h-[2000px] opacity-100"}` },
            React.createElement("div", { className: "mt-0.5 space-y-0" }, props.children))));
};
export default SideMenuSection;
//# sourceMappingURL=SideMenuSection.js.map