// @ts-check
import { html, WebComponent } from "../../src/index.js";

export class HelloWorld extends WebComponent {
  static props = {
    count: 0,
    emotion: "sad",
  };

  onInit() {
    this.props.count = 0;
  }

  get template() {
    const label = this.props.count ? `Clicked ${this.props.count}` : "World";
    const emote = this.props.emotion === "sad" ? ". 😭" : "! 🙌";

    return html`
      <button onclick=${() => ++this.props.count}>Hello ${label}${emote}</button>
    `
  }
}

customElements.define("hello-world", HelloWorld);