class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .theme-toggle {
                    transition: all 0.3s ease;
                }
            </style>
            <nav class="bg-white dark:bg-secondary-800 shadow-sm">
                <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                    <div class="flex items-center gap-2">
                        <i data-feather="edit-3" class="text-primary-500"></i>
                        <span class="text-xl font-bold text-secondary-900 dark:text-white">NoteBlocks</span>
                    </div>
                    <div class="flex items-center gap-4">
                        <button id="theme-toggle" class="p-2 rounded-full hover:bg-secondary-100 dark:hover:bg-secondary-700 theme-toggle">
                            <i data-feather="moon" class="hidden dark:block"></i>
                            <i data-feather="sun" class="dark:hidden"></i>
                        </button>
                    </div>
                </div>
            </nav>
        `;

        // Theme toggle functionality
        const themeToggle = this.shadowRoot.getElementById('theme-toggle');
        themeToggle.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();
        });

        // Check for saved theme preference
        if (localStorage.getItem('theme') === 'dark' || 
            (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }

        feather.replace();
    }
}

customElements.define('custom-navbar', CustomNavbar);