import * as React from "react";
import { Body } from "./live";
import { themeSettings } from "@sc/plugins/webcomponents/v2/theme";

import settings from "./settings";
import {
  sampleContentData,
  EditorWithCustomData,
} from "@sc/modules/page/Builder/Builder.stories";

export default {
  title: "Plugins|Web Components/Exists/Body",
  component: Body,
};

export const Default: React.FC = () => {
  return (
    <Body
      style={{
        backgroundColor: themeSettings.default.darkTextColor,
        padding: 20,
      }}
    >
      Body Content Goes Here
    </Body>
  );
};

export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      content={[
        ...sampleContentData.filter((itm) => itm.id !== 2540),
        {
          id: 2540,
          parent: false,
          ...settings.default,
          properties: {
            ...settings.default.properties,
            backgroundColor: "pink",
          },
        },
      ]}
    />
  );
};
