import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Fragment } from "react";
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbPageSubtitle, BreadcrumbSeparator, } from "../../components/ui/breadcrumb";
import { useEditContext } from "../client/editContext";
export function SettingsBreadcrumb({ currentPanelTitle, currentPanelSubtitle, breadcrumbItems, }) {
    const editContext = useEditContext();
    const showSubtitles = !editContext?.isMobile;
    const items = breadcrumbItems ?? [
        {
            title: currentPanelTitle,
            subtitle: currentPanelSubtitle,
        },
    ];
    return (_jsx(Breadcrumb, { "aria-label": "Settings breadcrumb", className: "text-neutral-grey-50 min-w-0 flex-1 text-sm", "data-testid": "settings-breadcrumb", children: _jsx(BreadcrumbList, { className: "flex-nowrap items-start gap-2", children: items.map((item, index) => {
                const isLastItem = index === items.length - 1;
                return (_jsxs(Fragment, { children: [index > 0 ? (_jsx(BreadcrumbSeparator, { className: "text-neutral-grey-50 mt-1 shrink-0 self-start" })) : null, _jsx(BreadcrumbItem, { className: "min-w-0 flex-col items-start gap-0 self-start leading-tight", children: item.onClick && !isLastItem ? (_jsx(BreadcrumbLink, { asChild: true, className: "cursor-pointer rounded-sm", children: _jsx("button", { type: "button", onClick: item.onClick, className: "p-0 text-left leading-tight", children: _jsxs("span", { className: "flex flex-col items-start gap-0", children: [_jsx("span", { className: "truncate leading-tight", children: item.title }), showSubtitles && item.subtitle ? (_jsx(BreadcrumbPageSubtitle, { className: "truncate text-[11px] leading-tight", children: item.subtitle })) : null] }) }) })) : (_jsxs(_Fragment, { children: [_jsx(BreadcrumbPage, { className: "truncate leading-tight", children: item.title }), showSubtitles && item.subtitle ? (_jsx(BreadcrumbPageSubtitle, { className: "truncate text-[11px] leading-tight", children: item.subtitle })) : null] })) })] }, index));
            }) }) }));
}
//# sourceMappingURL=SettingsBreadcrumb.js.map