class ThemeToggle extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        button {
          background: transparent;
          border: none;
          cursor: pointer;
          color: inherit;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
      </style>
      <button>
        <i data-feather="moon"></i>
        <span>Dark Mode</span>
      </button>
    `;

    this.shadowRoot.querySelector('button').addEventListener('click', () => {
      document.documentElement.classList.toggle('light-mode');
      this.updateIcon();
    });

    this.updateIcon();
  }

  updateIcon() {
    const icon = this.shadowRoot.querySelector('i');
    const span = this.shadowRoot.querySelector('span');
    if (document.documentElement.classList.contains('light-mode')) {
      icon.setAttribute('data-feather', 'sun');
      span.textContent = 'Light Mode';
    } else {
      icon.setAttribute('data-feather', 'moon');
      span.textContent = 'Dark Mode';
    }
    feather.replace();
  }
}

customElements.define('theme-toggle', ThemeToggle);