{{--
    Tabs Component
    Props:
      $tabs    – array of { label, id, icon? }
      $default – index of default active tab (0-based)
      $variant – underline|pills (default: underline)

    Usage:
      <x-utility.tabs :tabs="[
          ['label'=>'General','id'=>'tab-general'],
          ['label'=>'Security','id'=>'tab-security'],
      ]">
          <x-slot:panels>
              <div id="tab-general">General content</div>
              <div id="tab-security" class="hidden">Security content</div>
          </x-slot:panels>
      </x-utility.tabs>
--}}
@props([
    'tabs'    => [],
    'default' => 0,
    'variant' => 'underline',
])

<div x-data="tabs({{ $default }})">
    {{-- Tab list --}}
    <div @class([
        'flex gap-1' => $variant === 'pills',
        'flex border-b border-surface-200 dark:border-surface-700 gap-0' => $variant === 'underline',
    ]) role="tablist">
        @foreach($tabs as $index => $tab)
            <button
                type="button"
                role="tab"
                :aria-selected="isActive({{ $index }})"
                @click="setTab({{ $index }})"
                @class([
                    'px-4 py-2.5 text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-inset' => true,
                    'border-b-2 -mb-px' => $variant === 'underline',
                    'rounded-lg' => $variant === 'pills',
                ])
                :class="isActive({{ $index }}) ? '{{ $variant === 'underline' ? 'border-primary-600 text-primary-600 dark:border-primary-400 dark:text-primary-400' : 'bg-primary-600 text-white shadow' }}' : '{{ $variant === 'underline' ? 'border-transparent text-surface-500 hover:text-surface-700 hover:border-surface-300 dark:text-surface-400 dark:hover:text-surface-200' : 'text-surface-500 hover:bg-surface-100 dark:text-surface-400 dark:hover:bg-surface-800' }}'"
            >
                @if(isset($tab['icon']))
                    <span class="inline-flex items-center gap-2">
                        {!! $tab['icon'] !!}
                        {{ $tab['label'] }}
                    </span>
                @else
                    {{ $tab['label'] }}
                @endif
            </button>
        @endforeach
    </div>

    {{-- Panels --}}
    <div class="mt-4">
        @foreach($tabs as $index => $tab)
            <div
                x-show="isActive({{ $index }})"
                x-transition:enter="transition-opacity duration-200"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                role="tabpanel"
            >
                @if(isset($panels) && isset($panels[$index]))
                    {{ $panels[$index] }}
                @endif
            </div>
        @endforeach
        {{ $slot }}
    </div>
</div>