{{--
    Tabs Component - TailServer Theme
    
    Usage:
    <x-proxmox::ui.tabs :tabs="['Overview', 'Settings', 'Logs']" active="Overview">
        <x-proxmox::ui.tab-panel name="Overview">Overview content</x-proxmox::ui.tab-panel>
        <x-proxmox::ui.tab-panel name="Settings">Settings content</x-proxmox::ui.tab-panel>
        <x-proxmox::ui.tab-panel name="Logs">Logs content</x-proxmox::ui.tab-panel>
    </x-proxmox::ui.tabs>
--}}

@props([
    'tabs' => [],
    'active' => null,
    'variant' => 'default',
])

@php
    $variantClasses = [
        'default' => [
            'container' => 'border-b border-neutral/15',
            'tab' => 'px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-all duration-200',
            'active' => 'text-primary border-primary',
            'inactive' => 'text-base/50 border-transparent hover:text-base hover:border-neutral/30',
        ],
        'pills' => [
            'container' => 'flex gap-1.5 p-1.5 bg-neutral/5 rounded-xl border border-neutral/10',
            'tab' => 'px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200',
            'active' => 'bg-background-secondary text-base shadow-md',
            'inactive' => 'text-base/50 hover:text-base hover:bg-neutral/10',
        ],
        'buttons' => [
            'container' => 'flex gap-2',
            'tab' => 'px-4 py-2.5 text-sm font-medium rounded-xl border transition-all duration-200',
            'active' => 'bg-primary text-white border-primary shadow-md shadow-primary/25',
            'inactive' => 'bg-background-secondary text-base/60 border-neutral/20 hover:border-neutral/40 hover:text-base hover:shadow-sm',
        ],
    ];
    
    $styles = $variantClasses[$variant] ?? $variantClasses['default'];
    $activeTab = $active ?? ($tabs[0] ?? null);
@endphp

<div 
    x-data="{ activeTab: '{{ $activeTab }}' }"
    {{ $attributes }}
>
    {{-- Tab Navigation --}}
    <div class="{{ $styles['container'] }}">
        <nav class="flex @if($variant === 'default') -mb-px @endif">
            @foreach($tabs as $tab)
                @php
                    $tabName = is_array($tab) ? ($tab['name'] ?? $tab['label'] ?? '') : $tab;
                    $tabLabel = is_array($tab) ? ($tab['label'] ?? $tab['name'] ?? '') : $tab;
                    $tabIcon = is_array($tab) ? ($tab['icon'] ?? null) : null;
                    $tabBadge = is_array($tab) ? ($tab['badge'] ?? null) : null;
                @endphp
                <button
                    type="button"
                    @click="activeTab = '{{ $tabName }}'"
                    :class="activeTab === '{{ $tabName }}' ? '{{ $styles['active'] }}' : '{{ $styles['inactive'] }}'"
                    class="{{ $styles['tab'] }} flex items-center gap-2"
                >
                    @if($tabIcon)
                        <x-dynamic-component :component="$tabIcon" class="size-4" />
                    @endif
                    <span>{{ $tabLabel }}</span>
                    @if($tabBadge)
                        <span class="px-1.5 py-0.5 text-xs font-semibold rounded-full bg-primary/10 text-primary">
                            {{ $tabBadge }}
                        </span>
                    @endif
                </button>
            @endforeach
        </nav>
    </div>
    
    {{-- Tab Panels --}}
    <div class="mt-4">
        {{ $slot }}
    </div>
</div>