import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Minimize } from "lucide-react";
import { useEditContext } from "../editContext";
import { DeviceSwitchToolbar } from "../../menubar/toolbar-sections/DeviceSwitchToolbar";
export function FullscreenControls(props) {
    const { device, setDevice, canExit, onExit } = props;
    const editContext = useEditContext();
    const buttonBaseClass = `
    relative flex items-center justify-center
    h-8 w-8 rounded-md
    text-neutral-grey-50
    transition-all duration-200 ease-out
    hover:text-neutral-grey-100 hover:bg-neutral-grey-10
    active:scale-90
    cursor-pointer
  `;
    return (_jsxs("div", { className: "flex items-center gap-0.5", children: [!editContext?.isMobile && (_jsx(DeviceSwitchToolbar, { buttonSize: "small", iconClassName: "h-4 w-4", pageViewContext: { device, setDevice }, showFormOption: false, triggerTestId: "fullscreen-device-toggle" })), canExit && (_jsxs(_Fragment, { children: [!editContext?.isMobile && (_jsx("div", { className: "bg-neutral-grey-15 mx-0.5 h-4 w-px" })), _jsx("button", { onClick: onExit, className: buttonBaseClass, "aria-label": "Exit fullscreen", title: "Exit fullscreen (Ctrl+F11)", "data-testid": "fullscreen-exit-button", children: _jsx(Minimize, { className: "h-4 w-4", strokeWidth: 1 }) })] }))] }));
}
//# sourceMappingURL=FullscreenControls.js.map