import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined";
import { HeroIconName, icons } from "./generated/heroicons";

type HeroIconSize = "full" | "s" | "m" | "l";
@customElement("hero-icon")
export class Heroicon extends LitElement {
  @property()
  name: HeroIconName = "LightningBolt";

  @property({ type: Boolean })
  solid = false;

  @property({ type: String })
  size = "100%";

  render() {
    return html`
      <svg
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        fill="${this.solid ? "currentColor" : "none"}"
        viewBox="${this.solid ? "0 0 20 20" : "0 0 24 24"}"
        stroke=${this.solid ? "none" : "currentColor"}
        width="${this.size}"
        height="${this.size}"
      >
        ${html`${icons?.[this.name?.toLowerCase()]?.[
          this.solid ? "solid" : "outline"
        ]}`}
      </svg>
    `;
  }

  createRenderRoot() {
    return this;
  }
}