import * as React from "react";
import {
  withKnobs,
  text,
  object,
  boolean,
  select,
} from "@storybook/addon-knobs";
import { themeSettings } from "@sc/plugins/webcomponents/v2/theme";
import Animation, { AnimationType } from "./component";

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

export default {
  title: "Plugins|Web Components/Challenging/Animation",
  component: Animation,
  decorators: [withKnobs],
};

const ToAnimate = () => (
  <div style={{ background: "red", padding: 100 }}>
    This is content that should automatically fade in when loaded
  </div>
);
export const FadeIn: React.FC = () => (
  <>
    <Animation type={AnimationType.FADE_IN} autoPlay>
      <ToAnimate />
    </Animation>
  </>
);
export const Grow: React.FC = () => (
  <>
    <Animation type={AnimationType.GROW} autoPlay>
      <ToAnimate />
    </Animation>
  </>
);