import * as React from "react";
import EditorObject from "@sc/modules/page/Builder/EditorObject";
import PropertiesBuilder from "@sc/modules/v2/Properties/components/generator";

import { Container } from "./live";

import { PluginProps } from "./types";
import containerSettings from "./settings";

const Properties: React.FC = (props) => {
  const { properties } = containerSettings;
  return <PropertiesBuilder data={properties} {...props} />;
};

export const EditorContainer: React.FC<PluginProps> = (props) => {
  const { children, mode, id, settings } = props;

  return (
    <EditorObject {...props} id={id} color="#AAA" PropertiesView={Properties}>
      <Container {...settings}>{children}</Container>
    </EditorObject>
  );
};

export default EditorContainer;