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

const alterIcon = svg`<path d="M20.043 21H3.957c-1.538 0-2.5-1.664-1.734-2.997l8.043-13.988c.77-1.337 2.699-1.337 3.468 0l8.043 13.988C22.543 19.336 21.58 21 20.043 21zM12 9v4" stroke-width="1.5" stroke-linecap="round"></path><path d="M12 17.01l.01-.011" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>`;

@customElement("hvs-alert-icon")
export default class HvsAlertIcon extends LitElement {

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

declare global {
  interface HTMLElementTagNameMap {
    "hvs-alert-icon": HvsAlertIcon;
  }
}