components/language-selector.js

class LanguageSelector extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .language-selector {
          position: relative;
          display: inline-block;
        }
        button {
          background: transparent;
          border: 1px solid rgba(255,255,255,0.3);
          color: white;
          padding: 0.5rem 1rem;
          border-radius: 4px;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        button:hover {
          background: rgba(255,255,255,0.1);
        }
        .dropdown {
          position: absolute;
          right: 0;
          top: 100%;
          background: white;
          border-radius: 4px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
          min-width: 120px;
          z-index: 100;
          display: none;
        }
        .dropdown.show {
          display: block;
        }
        .dropdown a {
          display: block;
          padding: 0.5rem 1rem;
          color: #333;
          text-decoration: none;
        }
        .dropdown a:hover {
          background: #f5f5f5;
        }
        .current-language {
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
      </style>
      <div class="language-selector">
        <button id="toggleBtn">
          <span class="current-language">
            <span>${this.getAttribute('current') || 'EN'}</span>
            <i data-feather="chevron-down" width="16"></i>
          </span>
        </button>
        <div class="dropdown" id="dropdown">
          <a href="#" data-lang="en">English (EN)</a>
          <a href="#" data-lang="ms">Malay (MS)</a>
          <a href="#" data-lang="zh">Mandarin (ZH)</a>
          <a href="#" data-lang="yue">Cantonese (YUE)</a>
          <a href="#" data-lang="fi">Finnish (FI)</a>
        </div>
      </div>
    `;

    const toggleBtn = this.shadowRoot.getElementById('toggleBtn');
    const dropdown = this.shadowRoot.getElementById('dropdown');

    toggleBtn.addEventListener('click', () => {
      dropdown.classList.toggle('show');
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', (e) => {
      if (!this.contains(e.target)) {
        dropdown.classList.remove('show');
      }
    });

    // Handle language selection
    this.shadowRoot.querySelectorAll('.dropdown a').forEach(link => {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        const lang = link.getAttribute('data-lang');
        this.dispatchEvent(new CustomEvent('language-change', { 
          detail: { language: lang },
          bubbles: true,
          composed: true 
        }));
        dropdown.classList.remove('show');
      });
    });

    // Initialize feather icons
    if (window.feather) {
      window.feather.replace({ width: 16, height: 16 });
    }
  }
}

customElements.define('language-selector', LanguageSelector);