@props([
    'tabs' => [],
    'currentSection' => 'currentSection',
])

<div class="w-full mb-10">
    <div class="flex rounded-t-lg overflow-hidden border-b-4 border-primary shadow-lg overflow-x-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100"
        style="scrollbar-width: thin;">
        @foreach ($tabs as $index => $tab)
            <x-form.tab-button :isActive="$currentSection . ' == ' . $index" :label="$tab['label']" :click="$tab['click']" :aria-label="$tab['label'] . ' tab'"
                :number="$tab['number'] ?? ''" />
        @endforeach
    </div>
</div>