import * as React from "react";

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

import { EditorImage } from "./component";
import Image from "./live";
import settings from "./settings";

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

export const Default: React.FC = () => {
  return (
    <Image
      src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Anatomy_of_a_Sunset-2.jpg"
      style={{ maxWidth: "100%" }}
    />
  );
};

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