import * as React from "react";
import _ from "lodash";
import { SectionTypes } from "@sc/modules/v2/Properties/types";
import theme from "@sc/components/ui/theme";
import { IComponentSettings, ComponentTypes } from "../types";
import { lorem } from "@sc/plugins/misc/v2/blocks/weblayouts/utils";

const settings: IComponentSettings = {
  id: ComponentTypes.ACCORDIAN,
  name: "Accordian",
  description: "",
  thumbnail: "comp_accordion.png",
  default: {
    type: ComponentTypes.ACCORDIAN,
    data: [
      {
        type: ComponentTypes.ACCORDIANITEM,
        title: _.startCase(lorem.generateWords(5)),
        titleStyle: { padding: 5 },
        canHaveChildren: true,
        children: lorem.generateParagraphs(2),
      },
      {
        type: ComponentTypes.ACCORDIANITEM,
        title: _.startCase(lorem.generateWords(5)),
        titleStyle: { padding: 5 },
        canHaveChildren: true,
        children: lorem.generateParagraphs(2),
      },
      {
        type: ComponentTypes.ACCORDIANITEM,
        title: _.startCase(lorem.generateWords(5)),
        titleStyle: { padding: 5 },
        canHaveChildren: true,
        children: lorem.generateParagraphs(2),
      },
    ],
  },
  properties: {
    main: {
      sections: [
        {
          tab: "Basic",
          type: SectionTypes.TYPOGRAPHY,
          settings: {},
        },
        {
          tab: "Basic",
          type: SectionTypes.LISTSORTABLE,
          settings: {},
        },
        {
          tab: "Basic",
          type: SectionTypes.POSITIONPADDING,
          settings: {},
        },
      ],
    },
  },
};

export default settings;