@props(['navItems', 'currentTheme', 'toggleTheme', 'scrollToSection', 'getThemeClasses'])

<div id="floating-nav" class="fixed bottom-6 right-6 z-[100] flex flex-col items-end space-y-2">
    <div class="flex flex-col space-y-2 p-1 {{ $getThemeClasses('navBg') }} backdrop-blur-md rounded-full shadow-2xl border border-blue-700/50">
        <!-- Theme Toggle Button -->
        <button
            onclick="toggleTheme()"
            class="group relative flex items-center justify-center p-3 m-1 rounded-full text-gray-400 hover:text-orange-400 bg-gray-800/80 hover:bg-gray-700/80 transition-all duration-300 backdrop-blur-sm shadow-xl focus:outline-none focus:ring-2 focus:ring-orange-500"
            aria-label="Toggle Theme"
        >
            @if ($currentTheme === 'dark')
                @include('partials.icon', ['name' => 'Sun', 'size' => 'w-5 h-5'])
                <span class="absolute right-full mr-4 px-3 py-1 bg-gray-700 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap hidden md:block">
                    Switch to Light Mode
                </span>
            @else
                @include('partials.icon', ['name' => 'Moon', 'size' => 'w-5 h-5'])
                <span class="absolute right-full mr-4 px-3 py-1 bg-gray-700 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap hidden md:block">
                    Switch to Dark Mode
                </span>
            @endif
        </button>

        <!-- Navigation Items -->
        @foreach ($navItems as $item)
            <button
                onclick="scrollToSection('{{ $item['id'] }}')"
                class="group relative flex items-center justify-center p-3 m-1 rounded-full text-gray-300 hover:text-orange-400 bg-gray-800/80 hover:bg-gray-700/80 transition-all duration-300 backdrop-blur-sm shadow-xl focus:outline-none focus:ring-2 focus:ring-orange-500"
                aria-label="{{ $item['label'] }}"
            >
                @include('partials.icon', ['name' => $item['icon'], 'size' => 'w-5 h-5'])
                <span class="absolute right-full mr-4 px-3 py-1 bg-gray-700 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap hidden md:block">
                    {{ $item['label'] }}
                </span>
            </button>
        @endforeach
    </div>
</div>
