class CustomThemeToggle extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .theme-toggle {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          cursor: pointer;
          transition: all 0.3s ease;
          background: transparent;
          border: none;
          color: currentColor;
        }
        .theme-toggle:hover {
          background: rgba(0,0,0,0.1);
        }
        .dark .theme-toggle:hover {
          background: rgba(255,255,255,0.1);
        }
      </style>
      <button class="theme-toggle focus:outline-none" aria-label="Toggle dark mode">
        <i data-feather="sun" class="hidden dark:block"></i>
        <i data-feather="moon" class="dark:hidden"></i>
      </button>
    `;

    const button = this.shadowRoot.querySelector('.theme-toggle');
    button.addEventListener('click', () => {
      const html = document.documentElement;
      if (html.classList.contains('dark')) {
        html.classList.remove('dark');
        localStorage.setItem('theme', 'light');
      } else {
        html.classList.add('dark');
        localStorage.setItem('theme', 'dark');
      }
      feather.replace();
    });

    // Initialize feather icons
    feather.replace();
  }
}

customElements.define('custom-theme-toggle', CustomThemeToggle);