@props([
    'items' => [],
    'vertical' => false,
    'gap' => '2',
])

@php
    $containerClasses = $vertical 
        ? "flex flex-col gap-{$gap}" 
        : "inline-flex items-center rounded-lg border border-neutral/30 bg-background p-1 gap-1";
@endphp

<div 
    x-data="{ activeTab: '{{ collect($items)->first()['id'] ?? '' }}' }"
    {{ $attributes->merge(['class' => $containerClasses]) }}
>
    {{-- Tab buttons --}}
    <div class="{{ $vertical ? 'flex flex-col gap-1' : 'flex items-center gap-1' }}">
        @foreach($items as $item)
            <button
                type="button"
                @click="activeTab = '{{ $item['id'] }}'"
                :class="activeTab === '{{ $item['id'] }}' 
                    ? 'bg-primary text-white shadow-sm' 
                    : 'text-base/70 hover:text-base/90 hover:bg-neutral/10'"
                class="px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200 flex items-center gap-2"
            >
                @if(isset($item['icon']))
                    <x-dynamic-component :component="$item['icon']" class="size-4" />
                @endif
                {{ $item['label'] }}
                @if(isset($item['badge']))
                    <span class="ml-1 px-1.5 py-0.5 text-xs rounded-full bg-white/20">{{ $item['badge'] }}</span>
                @endif
            </button>
        @endforeach
    </div>

    {{-- Tab content --}}
    {{ $slot }}
</div>