import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useSyncExternalStore } from "react";
import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
import { SimpleIconButton } from "../ui/SimpleIconButton";
import { getSettingsNavigationSnapshot, subscribeSettingsNavigation, } from "./settingsNavigationStore";
export function SettingsTitlebar() {
    const nav = useSyncExternalStore(subscribeSettingsNavigation, getSettingsNavigationSnapshot, getSettingsNavigationSnapshot);
    const navigationOpen = nav.isDesktop
        ? !nav.desktopNavigationCollapsed
        : nav.mobileSidebarOpen;
    const label = navigationOpen
        ? "Collapse settings navigation"
        : "Open settings navigation";
    return (_jsxs("div", { className: "flex h-full min-w-0 items-center gap-2", children: [_jsx("div", { className: "bg-border-default h-6 w-px shrink-0", "aria-hidden": "true" }), _jsx(SimpleIconButton, { "data-testid": navigationOpen
                    ? "settings-navigation-collapse-button"
                    : "settings-navigation-expand-button", icon: navigationOpen ? (_jsx(PanelLeftClose, { className: "h-5 w-5", strokeWidth: 1 })) : (_jsx(PanelLeftOpen, { className: "h-5 w-5", strokeWidth: 1 })), label: label, selected: navigationOpen, size: "large", className: "h-8 w-8 bg-white", onClick: () => nav.onToggleNavigation?.() })] }));
}
//# sourceMappingURL=SettingsTitlebar.js.map