import * as React from "react";
import { EditorDivider } from "./component";
import { Divider } from "./live";

import { DividerTypes } from "./types";
import { themeSettings } from "@sc/plugins/webcomponents/v2/theme";

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

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

export const Default: React.FC = () => (
  <Divider
    mode={EditorMode.LIVE}
    style={{ margin: "40px auto", width: 100 }}
    color={themeSettings.default.highlightColor}
    size={3}
    type={DividerTypes.HORIZONTAL}
  />
);

export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      content={[
        { id: "CustomField", parent: "u5j1r64m5rf", ...settings.default },
        ...sampleContentData,
      ]}
    />
  );
};