'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Plus, Grid3X3 } from 'lucide-react';
import * as Switch from '@radix-ui/react-switch';
const DEVICE_LABELS = {
    desktop: '100%',
    tablet: '768px',
    mobile: '375px',
};
export function BottomBar({ deviceMode, showGridOverlay, onAddSection, onToggleGrid, }) {
    return (_jsxs("div", { className: "bg-card border-border flex h-10 shrink-0 items-center gap-4 border-t px-4", role: "toolbar", "aria-label": "Builder actions", children: [_jsxs("button", { onClick: onAddSection, className: "text-muted-foreground hover:text-foreground flex items-center gap-1.5 px-3 py-2 text-sm transition-colors", "aria-label": "Add a new section", children: [_jsx(Plus, { size: 14 }), _jsx("span", { children: "Add Section" })] }), _jsx("div", { className: "bg-border h-5 w-px" }), _jsxs("label", { className: "flex cursor-pointer items-center gap-2", children: [_jsx(Grid3X3, { size: 14, className: "text-muted-foreground" }), _jsx(Switch.Root, { checked: showGridOverlay, onCheckedChange: onToggleGrid, className: "bg-input-background data-[state=checked]:bg-primary relative h-[18px] w-8 rounded-full transition-colors", "aria-label": "Toggle grid overlay", children: _jsx(Switch.Thumb, { className: "bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" }) }), _jsx("span", { className: "text-muted-foreground text-xs", children: "Grid" })] }), _jsx("div", { className: "flex-1" }), _jsx("span", { className: "text-muted-foreground text-xs tabular-nums", children: DEVICE_LABELS[deviceMode] })] }));
}
//# sourceMappingURL=BottomBar.js.map