export const ListBlock = (bm, category, label, type) => {
  let listItem1 = `<div class="row">
  <div class="col-4">
    <img
      class="img-fluid"
      src="http://placehold.it/150x150/78c5d6/fff/"
      alt="Image"
    />
  </div>
  <div class="col-8">
    <strong class="mb-2 text-primary">World</strong>
    <h3 class="mb-0">Featured post</h3>
    <p class="card-text mb-auto">
      This is a wider card with supporting text below as a natural lead-in
      to additional content.
    </p>
  </div>
</div>`;
  let listItem2 = `<div class="row">
  <div class="col-4">
    <img
      class="img-fluid"
      src="http://placehold.it/150x150/78c5d6/fff/"
      alt="Image"
    />
  </div>
  <div class="col-8">
    <strong class="mb-2 text-success">Design</strong>
    <h3 class="mb-0">Post Title</h3>
    <p class="card-text mb-auto">
      This is a wider card with supporting text below as a natural lead-in
      to additional content.
    </p>
  </div>
</div>`;
  bm.add(type, {
    label,
    category: category,
    content: listItem1 + listItem2,
    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
      <div class="drap-on-six"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="32" height="50">
      <path d="M149.333 216v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24v-80c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zM125.333 32H24C10.745 32 0 42.745 0 56v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24zm80 448H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm-24-424v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24zm24 264H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24z"/>
  </svg></div>
      <div class="drapcode-compo-qustion ${className}__info">
        <a
          target="_blank"
          href="https://academy.drapcode.com/docs/app-builder/layout-component-list"
          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>
  `,
  });
};
