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 { PageHeader } from "../../components/PageHeader";
import { useEditContext } from "../client/editContext";
export function SettingsBreadcrumb({ currentPanelTitle, currentPanelSubtitle, breadcrumbItems, }) {
    const editContext = useEditContext();
    const showSubtitles = !editContext?.isMobile;
    const getTitleClass = (isLastItem) => isLastItem
        ? "text-neutral-grey-100 truncate text-2xl leading-tight font-medium tracking-normal"
        : "text-neutral-grey-50 truncate text-sm leading-5 font-medium";
    const getSubtitleClass = (isLastItem) => isLastItem
        ? "text-neutral-grey-50 mt-2 max-w-3xl text-sm leading-6"
        : "text-neutral-grey-50 truncate text-xs leading-4";
    const items = breadcrumbItems ?? [
        {
            title: currentPanelTitle,
            subtitle: currentPanelSubtitle,
        },
    ];
    if (items.length === 1 && !items[0].onClick) {
        return (_jsx(PageHeader, { title: items[0].title, description: showSubtitles ? items[0].subtitle : undefined, variant: "workspace", className: "min-w-0 flex-1", testId: "settings-breadcrumb" }));
    }
    return (_jsx(Breadcrumb, { "aria-label": "Settings breadcrumb", className: "min-w-0 flex-1", "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-0.5 shrink-0 self-start" })) : null, _jsx(BreadcrumbItem, { className: "min-w-0 flex-col items-start gap-0.5 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: getTitleClass(isLastItem), children: item.title }), showSubtitles && item.subtitle ? (_jsx(BreadcrumbPageSubtitle, { className: getSubtitleClass(isLastItem), children: item.subtitle })) : null] }) }) })) : (_jsxs(_Fragment, { children: [_jsx(BreadcrumbPage, { className: getTitleClass(isLastItem), children: item.title }), showSubtitles && item.subtitle ? (_jsx(BreadcrumbPageSubtitle, { className: getSubtitleClass(isLastItem), children: item.subtitle })) : null] })) })] }, index));
            }) }) }));
}
//# sourceMappingURL=SettingsBreadcrumb.js.map