import { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton, Link, OverflowMenu, OverflowMenuItem, SkeletonText, Stack, Tag, } from "@carbon/react";
import React from "react";
const breadCrumbWrapperStyles = {
    minHeight: "40px",
    display: "grid",
    gridAutoFlow: "column",
    gridAutoColumns: "max-content",
    alignItems: "center",
};
export const C3Breadcrumb = ({ loading, noTrailingSlash, elements, title, menu, tag, forwardRef, }) => {
    let breadcrumb = null;
    if (loading) {
        breadcrumb = (React.createElement(Stack, null,
            React.createElement(BreadcrumbSkeleton, null),
            title && React.createElement(SkeletonText, null)));
    }
    else {
        breadcrumb = (React.createElement(Stack, { gap: 1 },
            React.createElement(Breadcrumb, { noTrailingSlash: noTrailingSlash ?? false }, elements.map((element) => {
                return (React.createElement(BreadcrumbItem, { key: element.key },
                    React.createElement(Link, { as: forwardRef, style: { cursor: "pointer" }, ...element.routeProps }, element.label)));
            })),
            (menu || title || tag) && (React.createElement("div", { style: breadCrumbWrapperStyles },
                React.createElement(Stack, { orientation: "horizontal", gap: 4 },
                    title && React.createElement("h2", null, title),
                    tag && React.createElement(Tag, { type: "blue" }, tag)),
                menu && (React.createElement(OverflowMenu, { style: { float: "right" }, "aria-label": "breadcrumb menu" }, menu.map((item) => {
                    return (React.createElement(OverflowMenuItem, { key: item.key, id: item.key, onClick: () => item.onClick(), itemText: item.label, isDelete: item.isDelete }));
                })))))));
    }
    return React.createElement("div", { style: breadCrumbWrapperStyles }, breadcrumb);
};
