export const BreadcrumbBlock = (bm, category, label, type) => {
  bm.add(type, {
    label,
    category: category,
    content: `
    <nav aria-label="breadcrumb" class="main-breadcrumb" data-gjs-type="${type}" data-gjs-name="${label}">
      <ol class="breadcrumb" data-gjs-type="breadcrumb-container" data-gjs-name="Breadcrumb Container" style="background-color:  rgba(255,255,255,0);">
        <li class="breadcrumb-item" data-gjs-type="breadcrumb-item" data-gjs-name="Breadcrumb Item">
          <a data-gjs-type="link-box" href="#">
            <i data-gjs-type="drapcode-icons" draggable="true" data-highlightable="1" data-js="drapcode-icons" class="drapcode-icons gjs-selected"><svg data-gjs-type="svg" draggable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-gjs="drapcode-icons-svg" class="feather feather-home" id="iwiap">
                <path data-gjs-type="svg-in" draggable="true" d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" id="ix246">
                </path>
                <polyline data-gjs-type="svg-in" draggable="true" points="9 22 9 12 15 12 15 22">
                </polyline>
              </svg></i>
          </a>
        </li>
        <li class="breadcrumb-item" data-gjs-type="breadcrumb-item" data-gjs-name="Breadcrumb Item">
          <a data-gjs-type="link-box" href="#">
            <div data-gjs-type="text" style="display: inline">User</div>
          </a>
        </li>
        <li class="breadcrumb-item active" data-gjs-type="breadcrumb-item" data-gjs-name="Breadcrumb Item">
          <div data-gjs-type="text" style="display: inline">User Profile</div>
        </li>
      </ol>
    </nav>
    `,
    render: ({ model, className }) => `
    <div class="drapcode-compo-seventeen ${className}-label ${className}__drapcode-wrap">
    <div class="drap-on-six"><svg viewBox="0 0 300 300" width="32" height="50" xmlns="http://www.w3.org/2000/svg"><rect y="125" width="90" height="50" rx="10"></rect><path d="M115 135v30h70v-30h-70zm0-10h70a10 10 0 0 1 10 10v30a10 10 0 0 1-10 10h-70a10 10 0 0 1-10-10v-30a10 10 0 0 1 10-10zM220 135v30h70v-30h-70zm0-10h70a10 10 0 0 1 10 10v30a10 10 0 0 1-10 10h-70a10 10 0 0 1-10-10v-30a10 10 0 0 1 10-10z"></path></svg></div>
    <div class="drapcode-compo-qustion ${className}__info">
      <a
        target="_blank"
        href="#"
        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>
`,
  });
};
