import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useDroppable } from '@dnd-kit/react';
import { Text } from '@gravity-ui/uikit';
import { formBuilderV2Cn } from "../../../utils/cn.js";
import { CanvasList } from "../../Canvas/Canvas.js";
const b = formBuilderV2Cn('canvas-card');
export const SECTION_DROP_PREFIX = 'section-drop:';
export const SectionChildrenDropZone = ({ sectionId, fields }) => {
    const { ref, isDropTarget } = useDroppable({
        id: `${SECTION_DROP_PREFIX}${sectionId}`,
        data: { kind: 'section-drop', sectionId },
    });
    const className = b('children');
    return (_jsxs("div", { ref: ref, className: `${className}${isDropTarget ? ` ${className}_drop-target` : ''}`, children: [_jsx(CanvasList, { fields: fields, parentGroup: `section:${sectionId}` }), fields.length === 0 && (_jsx(Text, { variant: "body-2", color: "hint", children: "Empty section. Drag a tile from the palette into this box, or select the section first and click a tile to add it inside." }))] }));
};
//# sourceMappingURL=SectionChildrenDropZone.js.map
