import { LitElement, html, css, type SVGTemplateResult } from "lit";

import { customElement, property, state } from "lit/decorators.js";

@customElement("hero-icon")
export class HeroIcon extends LitElement {
  @property({ type: String })
  name = "";

  @state()
  private iconTemplate: SVGTemplateResult | null = null;

  static styles = css`
    :host {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
    }
    svg {
      width: 100%;
      height: 100%;
      fill: var(--icon-fill, none);
      stroke: var(--icon-stroke, currentColor);
      stroke-width: var(--icon-stroke-width, 1.5);
    }
  `;

  updated(changedProperties: Map<string, any>) {
    if (changedProperties.has("name")) {
      this.loadIcon();
    }
  }

  async loadIcon() {
    try {
      const module = await import(`./icons/${this.name}.ts`);
      this.iconTemplate = module.icon;
    } catch (e) {
      this.iconTemplate = null;
    }
  }

  render() {
    return html`
        ${this.iconTemplate}
    `;
  }
}