'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { ColumnRenderer } from './ColumnRenderer.js';
export function RowRenderer({ node, selectedNodeId, onSelectNode }) {
    const [hovered, setHovered] = useState(false);
    const isSelected = selectedNodeId === node.id;
    const gap = node.settings.gap ?? '16px';
    const verticalAlign = node.settings.verticalAlign ?? 'stretch';
    const alignMap = {
        top: 'start',
        center: 'center',
        bottom: 'end',
        stretch: 'stretch',
    };
    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' : ''}`, 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: "Row" })), _jsx("div", { className: "grid grid-cols-12", style: {
                    gap,
                    alignItems: alignMap[verticalAlign] ?? 'stretch',
                }, children: node.children.map((col) => (_jsx(ColumnRenderer, { node: col, selectedNodeId: selectedNodeId, onSelectNode: onSelectNode }, col.id))) })] }));
}
//# sourceMappingURL=RowRenderer.js.map