export const VerticalLineBlock = (bm, category, label, type) => {
  bm.add(type, {
    label: label,
    category: category,
    content: {
      type,
      name: "Vertical Line",
      resizable: true,
      style: {
        "box-sizing": "content-box",
        height: "100px",
        width: "32px",
        overflow: "visible",
        "margin-top": "1rem",
        "margin-bottom": "1rem",
        border: "0",
        "border-top-color": "currentcolor",
        "border-top-style": "none",
        "border-top-width": "0px",
        "border-left-color": "currentcolor",
        "border-left-style": "none",
        "border-left-width": "0px",
        "border-left": "1px solid rgba(0,0,0,.1)",
      },
    },
    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 448 512" width="32" height="50" style="transform: rotate(90deg);">
      <path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"/>
      </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>    
    `,
  });
};
