import * as React from "react";
import { Stacks } from "./component";
import { ComponentTypes } from "../types";

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

export default {
  title: "Plugins|Web Components/Challenging/Stacks",
  component: Stacks,
};

const data = [
  {
    type: ComponentTypes.TEXT,
    html: "This is a test #1!",
  },
  {
    type: ComponentTypes.HEADLINE,
    style: { color: "red", fontSize: "36pt" },
    html: "This is a test #2!",
  },
];

export const Default = () => {
  return (
    <Stacks
      style={{ width: 500, height: 300 }}
      globalStyle={{ color: "purple" }}
      data={data}
    />
  );
};
export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      content={[
        { id: "CustomField", parent: "u5j1r64m5rf", ...settings.default },
        ...sampleContentData,
      ]}
    />
  );
};