@php
    $presets = config('color-presets');
@endphp

<div id="color-switcher-container">
    <button id="switcher-toggle" class="text-secondary hover:text-primary transition-colors duration-300 focus:outline-none">
        <i class="fas fa-palette text-lg"></i>
    </button>

    <!-- Pushing the panel down to avoid header clipping and giving it a high z-index -->
    <div id="switcher-panel" class="hidden absolute top-20 right-6 w-64 glass-card p-4 rounded-2xl shadow-2xl animate-fade-in-up border border-[var(--border-color)] z-[100]">
        <h3 class="text-sm font-semibold mb-3 border-b border-[var(--border-color)] pb-2">Color Presets</h3>
        
        <div class="grid grid-cols-1 gap-2 max-h-80 overflow-y-auto pr-2 custom-scrollbar">
            @foreach($presets as $key => $preset)
            <button 
                data-preset="{{ $key }}"
                class="preset-item w-full flex items-center gap-3 p-2 rounded-lg transition-all duration-200 hover:bg-white/5 {{ ($activeColorPreset ?? 'default') === $key ? 'bg-white/10 ring-1 ring-primary' : '' }}"
            >
                <span class="w-6 h-6 rounded-full border border-white/20" style="background-color: {{ $preset['swatch'] }}"></span>
                <div class="text-left">
                    <div class="text-xs font-medium">{{ $preset['name'] }}</div>
                    <div class="text-[10px] text-muted capitalize">{{ $preset['type'] }}</div>
                </div>
                @if(($activeColorPreset ?? 'default') === $key)
                    <i class="fas fa-check ml-auto text-xs text-primary"></i>
                @endif
            </button>
            @endforeach
        </div>
    </div>
</div>

<style>
    .custom-scrollbar::-webkit-scrollbar {
        width: 2px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 5px;
    }
</style>