@props([
    'isActive' => false,
    'label' => '',
    'click' => '',
    'number' => '',
])

<button type="button"
    class="flex-1 min-w-[90px] sm:min-w-[120px] py-2 px-2 sm:py-3 sm:px-7 text-xs sm:text-sm font-bold tracking-wide uppercase transition-all duration-200 focus:outline-none rounded-t-lg border-b-4 shadow-md hover:shadow-xl focus-visible:ring-2 focus-visible:ring-indigo-500 dark:focus-visible:ring-indigo-300"
    :class="{
        'bg-primary text-white z-15 border-primary shadow-2xl scale-105 dark:bg-indigo-700 dark:text-white dark:border-indigo-400': {{ $isActive }},
        'bg-white text-gray-700 border-transparent hover:bg-gray-100 hover:shadow-xl dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700':
            !({{ $isActive }})
    }"
    @click="{{ $click }}" :aria-pressed="{{ $isActive ? 'true' : 'false' }}" role="tab" tabindex="0">
    <div class="flex items-center justify-center gap-1 sm:gap-2 w-full">
        <span class="block sm:hidden">{{ $number }}</span>
        <span class="hidden sm:block truncate max-w-[100px]" title="{{ $label }}">{{ $label }}</span>
    </div>
</button>