'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { LayoutGrid } from 'lucide-react';
import { SectionRenderer } from './SectionRenderer.js';
const DEVICE_CLASSES = {
    desktop: 'w-full',
    tablet: 'max-w-[768px] mx-auto',
    mobile: 'max-w-[375px] mx-auto',
};
export function BuilderCanvas({ tree, selectedNodeId, showGridOverlay, deviceMode, onSelectNode, }) {
    const handleCanvasClick = (e) => {
        if (e.target === e.currentTarget) {
            onSelectNode(null);
        }
    };
    return (_jsxs("div", { className: "bg-muted relative flex-1 overflow-auto p-6", onClick: handleCanvasClick, children: [showGridOverlay && _jsx(GridOverlay, { deviceMode: deviceMode }), _jsxs("div", { className: `bg-background relative min-h-full shadow-sm ${DEVICE_CLASSES[deviceMode]}`, onClick: handleCanvasClick, children: [tree.children.map((child) => {
                        if (child.type === 'section') {
                            return (_jsx(SectionRenderer, { node: child, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode }, child.id));
                        }
                        return null;
                    }), tree.children.length === 0 && (_jsxs("div", { className: "flex min-h-[400px] flex-col items-center justify-center text-center", children: [_jsx(LayoutGrid, { size: 32, className: "text-muted-foreground mb-3" }), _jsx("p", { className: "text-foreground mb-1 text-sm font-medium", children: "No sections yet" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Click \"Add Section\" below to start building your page" })] }))] })] }));
}
function GridOverlay({ deviceMode }) {
    return (_jsx("div", { className: `pointer-events-none absolute inset-0 z-50 p-6 ${deviceMode !== 'desktop' ? 'flex justify-center' : ''}`, "aria-hidden": "true", children: _jsx("div", { className: `grid h-full grid-cols-12 gap-4 opacity-[0.08] ${DEVICE_CLASSES[deviceMode]}`, children: Array.from({ length: 12 }).map((_, i) => (_jsx("div", { className: "bg-primary h-full rounded-sm" }, i))) }) }));
}
//# sourceMappingURL=BuilderCanvas.js.map