@props([
    'id' => null,
    'active' => false,
    'icon' => null,
    'tabKey' => null,
])

@php
    $baseClasses = 'inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-md transition-colors duration-150 cursor-pointer select-none border-none';
    $activeClasses = $active
        ? 'bg-[#4b82f7] text-white shadow-sm active'
        : 'bg-transparent text-slate-400 hover:text-slate-200';
@endphp

<button
    @if($id) id="{{ $id }}" @endif
    type="button"
    @if($tabKey) data-tab="{{ $tabKey }}" @endif
    {{ $attributes->merge(['class' => implode(' ', ['tab', $baseClasses, $activeClasses])]) }}>
    @if($icon)
        <i class="{{ $icon }} text-[11px]"></i>
    @endif
    @if(trim($slot))
        <span>{{ $slot }}</span>
    @endif
</button>