import Icon from "../Icon/Icon";
import UILink from "../Link/Link";
import IconProp from "../../../Types/Icon/IconProp";
import useTranslateValue from "../../Utils/Translation";
import React from "react";
const Breadcrumbs = ({ links, }) => {
    const { translateString } = useTranslateValue();
    return (React.createElement("nav", { className: "flex hidden md:block", "aria-label": "Breadcrumb" },
        React.createElement("ol", { role: "list", className: "flex items-center space-x-1" }, links &&
            links.length > 0 &&
            links.map((link, i) => {
                const translatedTitle = translateString(link.title) || link.title;
                return (React.createElement("li", { className: "breadcrumb-item", key: i },
                    i === 0 && (React.createElement("div", { className: "-mt-1" },
                        React.createElement(UILink, { to: link.to, className: "text-gray-400 hover:text-gray-500 -mt-1" },
                            React.createElement("span", { className: "text-sm font-medium text-gray-500 hover:text-gray-700 -mt-1" }, translatedTitle)))),
                    i !== 0 && (React.createElement("div", { className: "flex items-center" },
                        React.createElement(Icon, { className: "h-5 w-5 flex-shrink-0 text-gray-400", icon: IconProp.ChevronRight }),
                        React.createElement(UILink, { to: isCurrentPage(link.to)
                                ? null // Avoid linking to current page
                                : link.to, className: "ml-1 text-sm font-medium text-gray-500 hover:text-gray-700 -mt-1" }, translatedTitle)))));
            }))));
};
function isCurrentPage(linkTo) {
    return linkTo.toString() === window.location.pathname;
}
export default Breadcrumbs;
//# sourceMappingURL=Breadcrumbs.js.map