import * as React from "react";
import Stepper from "./component";
import { Step } from "@sc/plugins/webcomponents/v2";

// 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/Challenging/Stepper",
  component: Stepper,
};

export const Default: React.FC = () => {
  const state = "Shipping";
  return (
    <Stepper style={{}}>
      <Step
        step={1}
        caption1="Shipping"
        caption2="Where Should We Ship it?"
        active={state === "Shipping"}
      />
      <Step
        step={2}
        caption1="Your Info"
        caption2="Upgrade now And Save!"
        active={state === "Purchase"}
      />
    </Stepper>
  );
};
export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      content={[
        { id: "CustomField", parent: "u5j1r64m5rf", ...settings.default },
        ...sampleContentData,
      ]}
    />
  );
};