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

@customElement("sel-item")
export class SelItem extends LitElement {
  @property({ attribute: "display-type", type: Object, reflect: true })
  displayType?: unknown;

  @property({ attribute: true, type: Boolean, reflect: true })
  visible!: boolean;

  @property({ attribute: true, type: String, reflect: true })
  label?: string;

  private _handleDelete() {
    this.dispatchEvent(
      new Event("sel-item-deleted", { bubbles: true, composed: true }),
    );
  }

  protected override render() {
    return html`
      <div class="sel-item">
        <button class="remove" @click="${this._handleDelete}">del</button>
      </div>
    `;
  }
}