import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { ChevronLeft } from "lucide-react";
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,
        },
    ];
    const singleItem = items.length === 1 ? items[0] : undefined;
    if (singleItem && !singleItem.onClick) {
        const backLink = singleItem.backLink;
        return (_jsx(PageHeader, { title: singleItem.title, description: showSubtitles ? singleItem.subtitle : undefined, overline: backLink ? (_jsxs("button", { type: "button", onClick: backLink.onClick, className: "text-neutral-grey-50 hover:text-neutral-grey-100 inline-flex items-center gap-1 rounded-sm p-0 text-left text-xs leading-4 font-medium underline-offset-4 transition-colors hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-grey-100/70", children: [_jsx(ChevronLeft, { className: "h-3.5 w-3.5 shrink-0", strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("span", { children: backLink.label })] })) : 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