import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useFormContext } from "../../hooks/FormContext.js";
import { formBuilderCn } from "../../utils/cn.js";
import { AddPropertyButton } from "../AddPropertyButton/AddPropertyButton.js";
import { SectionHeader } from "../SectionHeader/SectionHeader.js";
import './ObjectFieldRenderer.css';
const b = formBuilderCn('object-field-renderer');
export const ObjectFieldRenderer = ({ field, fieldName: _fieldName, inputTypeMenuItems, renderNestedField, }) => {
    const { addObjectProperty } = useFormContext();
    return (_jsxs("div", { className: b('nested-fields'), children: [_jsx(SectionHeader, { title: "Properties:" }), field.properties.map((property, index) => renderNestedField(property, index, field.id)), _jsx(AddPropertyButton, { inputTypeMenuItems: inputTypeMenuItems, onAdd: (type) => addObjectProperty(field.id, type) })] }));
};
//# sourceMappingURL=ObjectFieldRenderer.js.map
