class UiEmpty extends HTMLElement {
  connectedCallback() {
    const icon    = this.getAttribute('icon')    || 'inbox';
    const heading = this.getAttribute('heading') || 'Nothing here yet';
    const body    = this.getAttribute('body')    || '';

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host { display: flex; justify-content: center; }
        .wrap {
          display: flex; flex-direction: column; align-items: center;
          gap: .75rem; padding: 3rem 2rem; text-align: center; max-width: 360px;
        }
        .icon-wrap {
          width: 64px; height: 64px; border-radius: 50%;
          background: var(--surface-2); display: flex; align-items: center;
          justify-content: center; color: var(--text-muted);
        }
        h3 { font-size: 1rem; font-weight: 600; color: var(--text); }
        p  { font-size: .875rem; color: var(--text-muted); line-height: 1.6; }
        ::slotted(*) { margin-top: .5rem; }
      </style>
      <div class="wrap">
        <div class="icon-wrap">
          <i data-lucide="${icon}" style="width:28px;height:28px"></i>
        </div>
        <h3>${heading}</h3>
        ${body ? `<p>${body}</p>` : ''}
        <slot></slot>
      </div>`;
    if (window.lucide) lucide.createIcons({ root: this.shadowRoot });
  }
}
customElements.define('ui-empty', UiEmpty);