import * as React from "react";
import { Icon } from "..";
import { IconTypes } from "./types";
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/Medium/Icon",
  component: Icon,
};

const style = {
  ICON: {
    padding: 10,
    fontSize: "42pt",
    fontWeight: "bold",
    lineHeight: "28pt",
    color: themeSettings.default.darkTextColor,
    textAlign: "center",
    display: "inline-block",
  },
};

export const Default: React.FC = () => {
  return (
    <div style={{ padding: 50, width: "100%" }}>
      <Icon style={style.ICON} type={IconTypes.Email} />
      <Icon style={style.ICON} type={IconTypes.AttachFile} />
      <Icon style={style.ICON} type={IconTypes.Check} />
    </div>
  );
};

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