components/dark-mode.js

class DarkModeToggle extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <button id="dark-mode-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition">
        <i class="fas fa-moon dark:hidden"></i>
        <i class="fas fa-sun hidden dark:block"></i>
      </button>
    `;

    this.querySelector('#dark-mode-toggle').addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
      localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
    });

    // Initialize from localStorage
    if (localStorage.getItem('darkMode') === 'true') {
      document.documentElement.classList.add('dark');
    }
  }
}

customElements.define('dark-mode-toggle', DarkModeToggle);