@props([
    'tab',
    'icon' => null,
])

<button @click="activeTab = '{{ $tab }}'"
        :class="activeTab === '{{ $tab }}' ? ' text-primary bg-primary-light' : 'border-transparent text-tertiary hover:text-primary'"
        class="flex items-center gap-2 px-4 py-2 border-b  transition-colors font-medium">
    @if($icon)
        <i data-lucide="{{ $icon }}" class="w-4 h-4"></i>
    @endif
    {{ $slot }}
</button>