import * as React from "react";

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

import { EditorText } from "./component";
import Text from "./live";
import settings from "./settings";
import { themeSettings } from "@sc/plugins/webcomponents/v2/theme";

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

const style = {
  TEXT: {
    fontFamily: "Poppins",
    fontSize: "11pt",
    fontWeight: "bold",
    color: themeSettings.default.lightTextColor,
  },
};

export const Default: React.FC = () => {
  return (
    <Text
      style={{
        ...style.TEXT,
        color: themeSettings.default.darkTextColor,
        padding: 20,
        backgroundColor: "lightyellow",
        marginLeft: 15,
        textAlign: "center",
      }}
    >
      Eum sunt consequatur sint eos neque ut aut repellat. Qui magni accusantium
      eligendi at molestiae sint ut omnis. Temporibus nostrum aut temporibus
      tempore. Laborum et accus…
    </Text>
  );
};

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