'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { RowRenderer } from './RowRenderer.js';
export function ContainerRenderer({ node, selectedNodeId, onSelectNode }) {
    const [hovered, setHovered] = useState(false);
    const isSelected = selectedNodeId === node.id;
    const maxWidth = node.settings.maxWidth ?? '1200px';
    const alignment = node.settings.alignment ?? 'center';
    const padding = node.settings.padding;
    const marginMap = {
        left: '0 auto 0 0',
        center: '0 auto',
        right: '0 0 0 auto',
    };
    const handleClick = (e) => {
        e.stopPropagation();
        onSelectNode(node.id);
    };
    return (_jsxs("div", { "data-node-id": node.id, className: `relative transition-shadow ${isSelected ? 'ring-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''}`, style: {
            maxWidth,
            margin: marginMap[alignment] ?? '0 auto',
            padding,
        }, onClick: handleClick, onMouseEnter: (e) => {
            e.stopPropagation();
            setHovered(true);
        }, onMouseLeave: () => setHovered(false), children: [(hovered || isSelected) && (_jsx("span", { className: "bg-primary text-primary-foreground absolute -top-2 -left-1 z-10 rounded px-1.5 py-0.5 text-xs font-medium", children: "Container" })), _jsx("div", { className: "flex flex-col gap-4", children: node.children.map((row) => (_jsx(RowRenderer, { node: row, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode }, row.id))) })] }));
}
//# sourceMappingURL=ContainerRenderer.js.map