// Tailwind
import Navigation from "../../Utils/Navigation";
import useTranslateValue from "../../Utils/Translation";
import Icon, { ThickProp } from "../Icon/Icon";
import Link from "../Link/Link";
import React from "react";
const NavBarItem = (props) => {
    var _a;
    const { translateString } = useTranslateValue();
    const translatedTitle = (_a = translateString(props.title)) !== null && _a !== void 0 ? _a : props.title;
    const activeRoute = props.activeRoute || props.route;
    const isActive = Boolean(activeRoute &&
        (props.exact
            ? Navigation.isOnThisPage(activeRoute)
            : Navigation.isStartWith(activeRoute)));
    let classNames = "text-gray-500 hover:bg-gray-50 hover:text-gray-900 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium";
    if (isActive) {
        classNames =
            "bg-gray-100 text-gray-900 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium";
    }
    if (props.isRenderedOnMobile) {
        classNames =
            "text-gray-900 hover:bg-gray-50 hover:text-gray-900 inline-flex items-center rounded-md py-2 px-3 text-base font-medium";
        if (isActive) {
            classNames =
                "bg-gray-100 text-gray-900 inline-flex items-center rounded-md py-2 px-3 text-base font-medium";
        }
    }
    return (React.createElement(React.Fragment, null,
        React.createElement(Link, { id: props.id, className: classNames, to: props.route ? props.route : null, onMouseOver: props.onMouseOver, onClick: props.onClick, onMouseLeave: props.onMouseLeave },
            props.icon ? (React.createElement(Icon, { icon: props.icon, className: "mr-1 h-4 w-4", thick: ThickProp.Thick })) : (React.createElement(React.Fragment, null)),
            React.createElement("span", null, translatedTitle),
            props.children ? React.createElement("div", { className: "arrow-down" }) : React.createElement(React.Fragment, null)),
        props.children));
};
export default NavBarItem;
//# sourceMappingURL=NavBarItem.js.map