import * as React from "react";
import FacebookLogin from "./live";
import { EditorFacebookLoginButton } from "./component";

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

export default {
  title: "Plugins|Web Components/Simple/Facebook Login",
  component: FacebookLogin,
  subcomponents: { EditorFacebookLoginButton },
};

export const Default: React.FC = () => <FacebookLogin appId="" />;

export const CustomStyling: React.FC = () => (
  <FacebookLogin
    appId=""
    buttonSettings={{
      style: {
        backgroundColor: "green",
      },
      caption1: "Login using Facebook",
    }}
  />
);

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