import { html, css, LitElement } from 'lit';
import { property } from 'lit/decorators.js';

export class YaloHello extends LitElement {
  static styles = css`
    :host {
      display: block;
      padding: 25px;
      color: var(--yalo-hello-text-color, #000);
    }
  `;

  @property({ type: String }) title = 'Hello world!';

  @property({ type: Number }) counter = 5;

  __increment() {
    this.counter += 1;
  }

  __decrement() {
    this.counter -= 1;
  }

  render() {
    return html`
      <h2>${this.title} Nr. ${this.counter}!</h2>
      <button @click=${this.__increment}>increment</button>
      <button @click=${this.__decrement}>decrement</button>
    `;
  }
}

window.customElements.define('yalo-hello', YaloHello);