export const SectionComponentsBlock = (
  bm,
  category,
  label,
  type,
  opts = {}
) => {
  const c = opts;
  const pfx = c.pfxSections;
  const sections = c.sections;
  const drapcodeSectionsSelectList = sections;

  drapcodeSectionsSelectList.forEach((element) => {
    bm.add(element.value, {
      label: element.label,
      category: "Sections",
      attributes: {
        title: element.label,
      },
      // activate: true,
      select: true,
      //?INFO: Uncomment the content block below to wrap a component container around the section
      // content: `
      //     <section class='${pfx}' data-js=${type} data-gjs-type=${type} style='padding: 12px;min-height: auto;'>
      //     ${element.code}
      //     </section>`,
      content: `${element.code}`,
      render: ({ model, className }) => `
      <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
      <div class="drap-on-six">${element.view}</div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/layout-component-sections"
          draggable="false"
        >
          <i class="bem-Svg ${className}__info-fa fa fa-info-circle" title="Check how to use ${label}?"></i>
        </a>
      </div>
      <div class="drapcode-com-one">${model.get("label")}</div>
    </div>
      `,
    });

    // bm.get(element.value).set({
    //   attributes: {
    //     title: element.label
    //   }
    // });
  });
};
