import * as React from "react";
import { IComponentSettings, ComponentTypes } from "../types";
import {
  sampleContentData,
  EditorWithCustomData,
} from "@sc/modules/page/Builder/Builder.stories";

import { Testing } from "./live";

export default {
  title: "Plugins|Web Components/Simple/Testing",
  component: Testing,
};

export const Default: React.FC = () => (
  <Testing properties={{ fontSize: "16pt", color: "red" }} />
);

export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      content={[
        {
          id: "TestEditorObject",
          parent: "u5j1r64m5rf",
          type: ComponentTypes.TESTING,
          properties: { fontSize: "64pt", color: "pink" },
        },
        ...sampleContentData,
      ]}
    />
  );
};