@props(['align' => 'right'])

<button class="theme-toggle btn btn-sm" id="themeToggle" title="Toggle Dark Mode">
    <i class="fas fa-moon"></i>
</button>

@push('styles')
<style>
.theme-toggle {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--color-gray-lightest);
    border: 1px solid var(--color-border);
    color: var(--color-dark);
    transition: all var(--transition-base);
}

.theme-toggle:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: scale(1.05);
}

[data-theme="dark"] .theme-toggle {
    background: var(--color-gray-lightest);
    border-color: var(--color-border);
    color: var(--color-dark);
}

[data-theme="dark"] .theme-toggle:hover {
    background: var(--color-primary);
    color: white;
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const toggle = document.getElementById('themeToggle');
    const icon = toggle.querySelector('i');
    
    // Check saved preference or system preference
    const savedTheme = localStorage.getItem('theme');
    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    
    if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
        document.documentElement.setAttribute('data-theme', 'dark');
        icon.classList.replace('fa-moon', 'fa-sun');
    }
    
    toggle.addEventListener('click', function() {
        const currentTheme = document.documentElement.getAttribute('data-theme');
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        
        document.documentElement.setAttribute('data-theme', newTheme);
        
        if (newTheme === 'dark') {
            icon.classList.replace('fa-moon', 'fa-sun');
        } else {
            icon.classList.replace('fa-sun', 'fa-moon');
        }
        
        localStorage.setItem('theme', newTheme);
    });
    
    // Image lazy loading enhancement
    document.addEventListener('DOMContentLoaded', function() {
        const lazyImages = document.querySelectorAll('img[loading="lazy"]');
        lazyImages.forEach(img => {
            if (img.complete) {
                img.classList.add('loaded');
            } else {
                img.addEventListener('load', function() {
                    img.classList.add('loaded');
                });
            }
        });
    });
});
</script>
@endpush