@props(['size' => '6'])

<button
    x-data="{
        theme: localStorage.getItem('theme') || 'light',
        toggleTheme() {
            this.theme = this.theme === 'light' ? 'dark' : 'light';
            localStorage.setItem('theme', this.theme);
            document.documentElement.classList.toggle('dark', this.theme === 'dark');
        }
    }"
    @click="toggleTheme"
    class="text-brand-muted hover:text-brand-primary dark:text-brand-dark-muted dark:hover:text-brand-dark-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-primary rounded-full p-2 transition-colors duration-300"
    aria-label="Toggle theme"
>
    <svg x-show="theme === 'light'" xmlns="http://www.w3.org/2000/svg" class="h-{{ $size }} w-{{ $size }}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
    </svg>
    <svg x-show="theme === 'dark'" xmlns="http://www.w3.org/2000/svg" class="h-{{ $size }} w-{{ $size }}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
    </svg>
</button>