import * as React from "react";
import Grid from "./component";
import { GridItem, Section } 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/Medium/Grid",
  component: Grid,
};

const style = {
  SECTION: {
    padding: 80,
    backgroundColor: "black",
    margin: "100px auto",
  },
};

export const Default: React.FC = () => {
  return (
    <Section
      style={{
        ...style.SECTION,
        padding: 0,
        width: 1000,
        maxWidth: "100%",
        textAlign: "center",
      }}
    >
      <Grid>
        <GridItem md={6}>
          <p style={{ color: "white" }}>[col]</p>
        </GridItem>
        <GridItem md={6}>
          <p style={{ color: "white" }}>[col]</p>
        </GridItem>
      </Grid>
    </Section>
  );
};
export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      content={[
        { id: "CustomField", parent: "u5j1r64m5rf", ...settings.default },
        ...sampleContentData,
      ]}
    />
  );
};