import * as React from "react";
import List from "./component";
import { Container } from "@sc/plugins/webcomponents/v2";
import { themeSettings } from "@sc/plugins/webcomponents/v2/theme";
// import checkmark from "@sc/lsvt/src/images/checkmark.png";

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

export default {
  title: "Plugins|Web Components/Medium/List",
  component: List,
};

// const checkmark = require("@sc/lsvt/images/checkmark.png");

const style = {
  li: {
    color: themeSettings.default.darkTextColor,
    // backgroundImage: `url(${checkmark})`,
    backgroundPosition: "top left",
    backgroundRepeat: "no-repeat",
    marginBottom: 30,
    // marginTop: -2,
    textAlign: "left",
    padding: `5px 0 15px 60px`,
    fontSize: 20,
    fontFamily: "Tahoma",
  },
};

export const Default: React.FC = () => {
  return (
    <Container style={{ padding: "0 20px 20px" }}>
      <List data={settings.default.data} />
    </Container>
  );
};

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