import * as React from "react";
import { EditorButton } from "./component";
import { Button } from "./live";
import { style } from "./style";
import settings from "./settings";
import {
  sampleContentData,
  EditorWithCustomData,
} from "@sc/modules/page/Builder/Builder.stories";
import { IconTypes } from "../Icon";

export default {
  title: "Plugins|Web Components/Simple/Button",
  component: Button,
  subcomponents: { EditorButton },
  parameters: {
    componentSubtitle: "This is the Button Web component",
  },
};

export const Default: React.FC = () => {
  return (
    <Button
      style={{ ...style.BUTTON.style, margin: 0 }}
      hoverStyle={{ backgroundColor: "#FF0000" }}
      caption1="YES! Please Add To My Order!"
      caption1style={style.BUTTON.caption1}
      icon={IconTypes.Email}
      caption2="Thank You For The Discount!"
      caption2style={style.BUTTON.caption2}
    />
  );
};

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