import { LitElement, html, svg, css } from "lit";
import { customElement} from "lit/decorators.js";

const buildingPath = svg`<path d="M7 9.01l.01-.011M11 9.01l.01-.011M7 13.01l.01-.011M11 13.01l.01-.011M7 17.01l.01-.011M11 17.01l.01-.011M15 21H3.6a.6.6 0 01-.6-.6V5.6a.6.6 0 01.6-.6H9V3.6a.6.6 0 01.6-.6h4.8a.6.6 0 01.6.6V9m0 12h5.4a.6.6 0 00.6-.6V9.6a.6.6 0 00-.6-.6H15m0 12v-4m0-8v4m0 0h2m-2 0v4m0 0h2" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>`;

@customElement("hvs-building-icon")
export default class HvsBuildingIcon extends LitElement {

  protected render() {
    return html`
      <div class="icon-container">
        <svg
          stroke-width="1.5"
          width="22px"
          height="22px"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          stroke="#98A2B3"
        >
          ${buildingPath}
        </svg>
      </div>
    `;
  }

  static styles = css`
  .icon-container {
    width: 24px;
    height: 24px;
  }
  `
}

declare global {
  interface HTMLElementTagNameMap {
    "hvs-building-icon": HvsBuildingIcon;
  }
}