'use client';
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useState } from 'react';
import { BlockRenderer } from './BlockRenderer.js';
import { ContainerRenderer } from './ContainerRenderer.js';
export function ColumnRenderer({ node, selectedNodeId, onSelectNode }) {
    const [hovered, setHovered] = useState(false);
    const isSelected = selectedNodeId === node.id;
    const width = node.settings.width;
    const isEmpty = node.children.length === 0;
    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: {
            gridColumn: `span ${width}`,
            padding: node.settings.padding,
            background: node.settings.background,
        }, onClick: handleClick, onMouseEnter: (e) => {
            e.stopPropagation();
            setHovered(true);
        }, onMouseLeave: () => setHovered(false), children: [(hovered || isSelected) && (_jsxs("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: ["Col ", width] })), isEmpty ? (_jsx("div", { className: "border-border text-muted-foreground flex min-h-[64px] items-center justify-center rounded-md border-2 border-dashed text-sm", children: "Empty column" })) : (_jsx("div", { className: "flex flex-col gap-2", children: node.children.map((child) => {
                    if (child.type === 'block') {
                        return (_jsx(BlockRenderer, { node: child, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode }, child.id));
                    }
                    if (child.type === 'container') {
                        return (_jsx(ContainerRenderer, { node: child, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode }, child.id));
                    }
                    return null;
                }) }))] }));
}
//# sourceMappingURL=ColumnRenderer.js.map