'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { ContainerRenderer } from './ContainerRenderer.js';
import { RowRenderer } from './RowRenderer.js';
export function SectionRenderer({ node, selectedNodeId, onSelectNode }) {
    const [hovered, setHovered] = useState(false);
    const isSelected = selectedNodeId === node.id;
    const handleClick = (e) => {
        e.stopPropagation();
        onSelectNode(node.id);
    };
    const backgroundStyle = {};
    if (node.settings.background) {
        backgroundStyle.backgroundColor = node.settings.background;
    }
    if (node.settings.backgroundImage) {
        backgroundStyle.backgroundImage = `url(${node.settings.backgroundImage})`;
        backgroundStyle.backgroundSize = 'cover';
        backgroundStyle.backgroundPosition = 'center';
    }
    if (node.settings.backgroundGradient) {
        backgroundStyle.backgroundImage = node.settings.backgroundGradient;
    }
    if (node.settings.paddingTop) {
        backgroundStyle.paddingTop = node.settings.paddingTop;
    }
    if (node.settings.paddingBottom) {
        backgroundStyle.paddingBottom = node.settings.paddingBottom;
    }
    if (node.settings.marginTop) {
        backgroundStyle.marginTop = node.settings.marginTop;
    }
    if (node.settings.marginBottom) {
        backgroundStyle.marginBottom = node.settings.marginBottom;
    }
    return (_jsxs("div", { "data-node-id": node.id, className: `relative w-full transition-shadow ${isSelected ? 'ring-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''}`, style: backgroundStyle, 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: "Section" })), node.children.map((child) => {
                if (child.type === 'container') {
                    return (_jsx(ContainerRenderer, { node: child, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode }, child.id));
                }
                if (child.type === 'row') {
                    return (_jsx(RowRenderer, { node: child, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode }, child.id));
                }
                return null;
            })] }));
}
//# sourceMappingURL=SectionRenderer.js.map