import { defineComponent } from "vue";
import { string } from "vue-types";
import { useCompData } from ".";
import { useEditor } from "../../../..";

export const Component = defineComponent({
  props: {
    compId: string().isRequired,
  },
  setup(props, { slots }) {
    const editor = useEditor();
    const { helper } = editor;
    const { children, layout } = useCompData(props.compId);

    return () => (
      <div style={helper.createStyle(layout)}>
        <div class="page-editing-content relative">
          {slots.Container?.(
            children.default.map((compId) => {
              const comp = helper.findComp(compId);
              return slots.CompItem?.(comp);
            })
          )}
        </div>
      </div>
    );
  },
});