@props(['active', 'clientUuid', 'appointmentsCount' => 0, 'paymentsCount' => 0, 'activitiesCount' => 0])

<div class="bg-white dark:bg-gray-800 rounded-lg shadow">
    <div class="border-b border-gray-200 dark:border-gray-700" id="client-tabs">
        <nav class="flex -mb-px overflow-x-auto scroll-smooth">
            <a href="{{ route('provider.clients.show', ['client_uuid' => $clientUuid, 'tab' => 'overview']) }}" 
               class="px-4 md:px-6 py-3 text-sm font-medium whitespace-nowrap {{ $active === 'overview' ? 'text-primary' : 'text-gray-500 hover:text-gray-700' }}">
                Vue d'ensemble
            </a>
            <a href="{{ route('provider.clients.show', ['client_uuid' => $clientUuid, 'tab' => 'appointments']) }}" 
               class="px-4 md:px-6 py-3 text-sm font-medium whitespace-nowrap {{ $active === 'appointments' ? 'text-primary' : 'text-gray-500 hover:text-gray-700' }}">
                Rendez-vous <span class="text-xs {{ $active === 'appointments' ? 'text-primary' : 'text-gray-400 dark:text-gray-500' }}">({{ $appointmentsCount }})</span>
            </a>
            <a href="{{ route('provider.clients.show', ['client_uuid' => $clientUuid, 'tab' => 'invoices']) }}" 
               class="px-4 md:px-6 py-3 text-sm font-medium whitespace-nowrap {{ $active === 'invoices' ? 'text-primary' : 'text-gray-500 hover:text-gray-700' }}">
                Factures <span class="text-xs {{ $active === 'invoices' ? 'text-primary' : 'text-gray-400 dark:text-gray-500' }}">({{ $paymentsCount }})</span>
            </a>
            <a href="{{ route('provider.clients.show', ['client_uuid' => $clientUuid, 'tab' => 'activity']) }}" 
               class="px-4 md:px-6 py-3 text-sm font-medium whitespace-nowrap {{ $active === 'activity' ? 'text-primary' : 'text-gray-500 hover:text-gray-700' }}">
                Activité <span class="text-xs {{ $active === 'activity' ? 'text-primary' : 'text-gray-400 dark:text-gray-500' }}">({{ $activitiesCount }})</span>
            </a>
        </nav>
    </div>
    <div class="p-3 md:p-6">
        {{ $slot }}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const activeTab = document.querySelector('#client-tabs .text-primary');
    if (activeTab) {
        activeTab.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
    }
});
</script>