@props(['size' => 'md', 'showLabel' => false])

@php
$sizeClasses = [
    'sm' => 'w-8 h-8 text-sm',
    'md' => 'w-10 h-10 text-base',
    'lg' => 'w-12 h-12 text-lg'
];
$buttonClass = $sizeClasses[$size] ?? $sizeClasses['md'];
@endphp

<div x-data="themeToggle()" class="relative">
    <button @click="toggle()" 
            class="theme-toggle {{ $buttonClass }} relative overflow-hidden group flex items-center justify-center"
            :title="darkMode ? 'Açık temaya geç' : 'Karanlık temaya geç'"
            :aria-label="darkMode ? 'Açık temaya geç' : 'Karanlık temaya geç'">
        
        <!-- Background animation -->
        <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300 rounded-lg"></div>
        
        <!-- Icons -->
        <div class="relative z-10 flex items-center justify-center">
            <!-- Moon icon (dark mode off) -->
            <svg x-show="!darkMode" 
                 x-transition:enter="transition-all duration-300 ease-out"
                 x-transition:enter-start="opacity-0 rotate-90 scale-50"
                 x-transition:enter-end="opacity-100 rotate-0 scale-100"
                 x-transition:leave="transition-all duration-300 ease-in"
                 x-transition:leave-start="opacity-100 rotate-0 scale-100"
                 x-transition:leave-end="opacity-0 -rotate-90 scale-50"
                 class="w-5 h-5 transform transition-transform duration-300 group-hover:scale-110" 
                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                      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"></path>
            </svg>
            
            <!-- Sun icon (dark mode on) -->
            <svg x-show="darkMode" 
                 x-transition:enter="transition-all duration-300 ease-out"
                 x-transition:enter-start="opacity-0 rotate-90 scale-50"
                 x-transition:enter-end="opacity-100 rotate-0 scale-100"
                 x-transition:leave="transition-all duration-300 ease-in"
                 x-transition:leave-start="opacity-100 rotate-0 scale-100"
                 x-transition:leave-end="opacity-0 -rotate-90 scale-50"
                 class="w-5 h-5 transform transition-transform duration-300 group-hover:scale-110 group-hover:rotate-12" 
                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                      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"></path>
            </svg>
        </div>
        
        @if($showLabel)
            <span class="ml-2 text-sm font-medium" x-text="darkMode ? 'Açık Tema' : 'Karanlık Tema'"></span>
        @endif
    </button>
    
    <!-- Ripple effect -->
    <div x-show="ripple" 
         x-transition:enter="transition-all duration-300 ease-out"
         x-transition:enter-start="opacity-100 scale-0"
         x-transition:enter-end="opacity-0 scale-150"
         class="absolute inset-0 bg-primary-500 rounded-lg pointer-events-none"
         @transitionend="ripple = false"></div>
</div>

<script>
function themeToggle() {
    return {
        darkMode: false,
        ripple: false,
        
        init() {
            // Get dark mode state from parent Alpine component
            this.darkMode = this.$root.darkMode;
            
            // Watch for changes in parent component
            this.$watch('$root.darkMode', (value) => {
                this.darkMode = value;
            });
        },
        
        toggle() {
            // Trigger ripple effect
            this.ripple = true;
            
            // Toggle theme in parent component
            this.$root.toggleDarkMode();
        }
    }
}
</script>