{{-- Thêm prop storageKey (tùy chọn) --}}
@props(['targetId', 'storageKey' => ''])

{{-- Widget Component --}}
<div data-floating-scroll-widget 
     data-target="{{ $targetId }}" 
     data-storage-key="{{ $storageKey }}"
     class="fixed bottom-6 right-6 z-50 transform transition-all duration-300 opacity-0 translate-y-4 pointer-events-none">
    <div class="bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-slate-200 p-3 w-64">
        
        {{-- Header Area --}}
        <div class="flex items-center justify-between group gap-2">
            {{-- Drag Handle --}}
            <div data-drag-handle class="cursor-move p-1 -ml-1 text-slate-400 hover:text-indigo-500 hover:bg-indigo-50 rounded transition-colors active:cursor-grabbing" title="Nhấn giữ để di chuyển">
                <i data-lucide="grip-horizontal" class="w-4 h-4"></i>
            </div>

            {{-- Toggle Area --}}
            <div data-toggle-widget class="flex-1 flex items-center justify-between cursor-pointer select-none">
                <span class="text-[10px] font-bold uppercase tracking-wider text-slate-500 group-hover:text-indigo-600 transition-colors">Cuộn nhanh</span>
                <div class="text-slate-400 group-hover:text-slate-600 transition-colors">
                    <i data-toggle-icon data-lucide="chevron-down" class="w-4 h-4 transition-transform duration-300"></i>
                </div>
            </div>
        </div>

        {{-- Collapsible Body --}}
        <div data-widget-body class="grid transition-all duration-300 opacity-100" style="grid-template-rows: 1fr;">
            <div class="overflow-hidden">
                <div class="pt-3 flex flex-col gap-2">
                    <div class="flex gap-1 justify-between">
                        <button type="button" data-scroll-left class="flex-1 flex justify-center py-1.5 text-slate-600 bg-slate-50 rounded-md border border-slate-200 hover:bg-slate-100 transition-colors shadow-sm focus:ring-1 focus:ring-slate-300">
                            <i data-lucide="chevron-left" class="w-3.5 h-3.5"></i>
                        </button>
                        <button type="button" data-scroll-right class="flex-1 flex justify-center py-1.5 text-slate-600 bg-slate-50 rounded-md border border-slate-200 hover:bg-slate-100 transition-colors shadow-sm focus:ring-1 focus:ring-slate-300">
                            <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
                        </button>
                    </div>

                    <div data-mini-map class="relative w-full h-8 bg-slate-100 rounded-md overflow-hidden border border-slate-200 cursor-pointer group">
                        <div class="absolute inset-0 opacity-[0.08]" style="background-image: linear-gradient(#94a3b8 1px, transparent 1px), linear-gradient(90deg, #94a3b8 1px, transparent 1px); background-size: 10px 10px;"></div>
                        <div data-mini-handle class="absolute top-0 bottom-0 left-0 h-full bg-indigo-500/20 border border-indigo-500 rounded-md cursor-grab active:cursor-grabbing transition-all duration-100 group-hover:bg-indigo-500/30"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>