@props(['tabs' => [], 'active' => 0, 'variant' => 'underline', 'scrollable' => false])

<div x-data="{ activeTab: {{ $active }} }" {{ $attributes->merge(['class' => 'w-full']) }}>
    {{-- Tab list --}}
    <div class="{{ $scrollable ? 'overflow-x-auto scrollbar-hide' : '' }}">
        <nav class="flex {{ $variant === 'pills' ? 'gap-2 p-1 bg-slate-100 dark:bg-slate-700 rounded-lg' : ($variant === 'boxed' ? 'gap-1 border-b border-slate-200 dark:border-slate-700' : 'gap-0 border-b border-slate-200 dark:border-slate-700') }}" role="tablist" aria-label="Tabs">
            @foreach($tabs as $index => $tab)
                <button
                    @click="activeTab = {{ $index }}"
                    :class="activeTab === {{ $index }}
                        ? '{{ match($variant) {
                            'pills' => 'bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 shadow-sm',
                            'boxed' => 'bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-400 border border-primary-200 dark:border-primary-800',
                            default => 'border-b-2 border-primary-600 text-primary-600 dark:text-primary-400',
                        } }}'
                        : '{{ match($variant) {
                            'pills' => 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300',
                            'boxed' => 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 border border-transparent',
                            default => 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 border-b-2 border-transparent',
                        } }}'"
                    class="px-4 py-2.5 text-sm font-medium transition-colors whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-t {{ $variant === 'pills' ? 'rounded-md' : '' }}"
                    role="tab"
                    :aria-selected="activeTab === {{ $index }}"
                    tabindex="0"
                    @keydown.arrow-right.prevent="activeTab = Math.min({{ count($tabs) - 1 }}, activeTab + 1)"
                    @keydown.arrow-left.prevent="activeTab = Math.max(0, activeTab - 1)"
                >
                    {{ is_array($tab) ? ($tab['label'] ?? $tab['id'] ?? '') : $tab }}
                </button>
            @endforeach
        </nav>
    </div>

    {{-- Tab panels --}}
    <div class="mt-4">
        @foreach($tabs as $index => $tab)
            <div
                x-show="activeTab === {{ $index }}"
                x-transition:enter="transition ease-out duration-200"
                x-transition:enter-start="opacity-0 -translate-y-1"
                x-transition:enter-end="opacity-100 translate-y-0"
                role="tabpanel"
                aria-label="{{ is_array($tab) ? ($tab['label'] ?? $tab['id'] ?? '') : $tab }}"
                {{ $index === 0 ? '' : 'x-cloak' }}
            >
                {{ ${'slot_' . $index} ?? '' }}
            </div>
        @endforeach
    </div>
</div>