import Navigation from "../../Utils/Navigation";
import useTranslateValue from "../../Utils/Translation";
import Badge from "../Badge/Badge";
import Icon from "../Icon/Icon";
import UILink from "../Link/Link";
import IconProp from "../../../Types/Icon/IconProp";
import React from "react";
const SideMenuItem = (props) => {
    const { translateString } = useTranslateValue();
    const isActive = Navigation.isOnThisPage(props.link.to);
    const isSubItemActive = props.subItemLink
        ? Navigation.isOnThisPage(props.subItemLink.to)
        : false;
    const translatedTitle = translateString(props.link.title) || props.link.title;
    const translatedSubItemTitle = props.subItemLink
        ? translateString(props.subItemLink.title) || props.subItemLink.title
        : undefined;
    return (React.createElement(React.Fragment, null,
        React.createElement(UILink, { className: `
          ${props.className || ""}
          group relative flex items-center justify-between
          px-2 py-1.5 rounded-lg
          text-sm font-medium
          transition-all duration-200 ease-out
          ${isActive
                ? "bg-gradient-to-r from-indigo-50 to-indigo-50/50 text-indigo-700 shadow-sm"
                : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"}
        `, to: props.link.to, onClick: () => {
                window.scrollTo({ top: 0, behavior: "smooth" });
            } },
            React.createElement("div", { className: `
            absolute left-0 top-1/2 -translate-y-1/2
            w-0.5 rounded-full
            transition-all duration-200 ease-out
            ${isActive ? "h-5 bg-indigo-600" : "h-0 bg-transparent"}
          ` }),
            React.createElement("div", { className: "flex items-center min-w-0 gap-2" },
                props.icon && (React.createElement("div", { className: `
                flex items-center justify-center
                w-6 h-6 rounded-md
                transition-all duration-200
                ${isActive
                        ? "bg-indigo-100 text-indigo-600"
                        : "bg-gray-100 text-gray-500 group-hover:bg-gray-200 group-hover:text-gray-700"}
              ` },
                    React.createElement(Icon, { icon: props.icon, className: "h-3.5 w-3.5" }))),
                React.createElement("span", { className: `
              truncate transition-colors duration-200
              ${isActive ? "font-semibold" : ""}
            ` }, translatedTitle)),
            (props.badge !== undefined ||
                props.showAlert ||
                props.showWarning) && (React.createElement("div", { className: "flex items-center gap-1.5 ml-2 flex-shrink-0" },
                props.badge !== undefined && (React.createElement(Badge, { badgeCount: props.badge, badgeType: props.badgeType })),
                props.showAlert && (React.createElement("div", { className: "flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-br from-red-50 to-red-100 ring-1 ring-inset ring-red-200/60 shadow-sm" },
                    React.createElement(Icon, { icon: IconProp.Error, className: "text-red-600 h-3 w-3" }))),
                props.showWarning && (React.createElement("div", { className: "flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-br from-amber-50 to-amber-100 ring-1 ring-inset ring-amber-200/60 shadow-sm" },
                    React.createElement(Icon, { icon: IconProp.Alert, className: "text-amber-600 h-3 w-3" }))))),
            React.createElement("div", { className: `
            absolute inset-0 rounded-lg
            border-2 border-transparent
            transition-all duration-200
            ${!isActive ? "group-hover:border-gray-200" : ""}
            pointer-events-none
          ` })),
        props.subItemLink && (React.createElement(UILink, { className: `
            ${props.className || ""}
            group relative flex items-center justify-between
            ml-8 px-2 py-1.5 rounded-lg
            text-sm font-medium
            transition-all duration-200 ease-out
            ${isSubItemActive
                ? "bg-indigo-50/70 text-indigo-700"
                : "text-gray-500 hover:bg-gray-50 hover:text-gray-700"}
          `, to: props.subItemLink.to, onClick: () => {
                window.scrollTo({ top: 0, behavior: "smooth" });
            } },
            React.createElement("div", { className: "absolute -left-3 top-1/2 w-2 h-px bg-gray-200" }),
            React.createElement("div", { className: "flex items-center min-w-0 gap-2" },
                React.createElement(Icon, { icon: props.subItemIcon || IconProp.MinusSmall, className: `
                h-4 w-4 transition-colors duration-200
                ${isSubItemActive
                        ? "text-indigo-500"
                        : "text-gray-400 group-hover:text-gray-600"}
              ` }),
                React.createElement("span", { className: "truncate" }, translatedSubItemTitle))))));
};
export default SideMenuItem;
//# sourceMappingURL=SideMenuItem.js.map