@props(['active' => ''])

<nav x-data x-init="$nextTick(() => $el.querySelector('.bg-white')?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }))" class="flex overflow-x-auto scroll-smooth rounded-lg bg-gray-100 p-1 dark:bg-gray-900 [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-track]:bg-white dark:[&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-200 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600">
    <a href="{{ route('provider.finances.index', ['tab' => 'factures']) }}" 
       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out whitespace-nowrap {{ $active === 'factures' || $active === 'synthese' ? 'bg-white text-gray-900 shadow-sm dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200' }}">
        Factures de vente
    </a>
    <a href="{{ route('provider.finances.index', ['tab' => 'achats']) }}" 
       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out whitespace-nowrap {{ $active === 'achats' ? 'bg-white text-gray-900 shadow-sm dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200' }}">
        Achats
    </a>
    <a href="{{ route('provider.finances.index', ['tab' => 'tresorerie']) }}" 
       class="inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors duration-200 ease-in-out whitespace-nowrap {{ $active === 'tresorerie' ? 'bg-white text-gray-900 shadow-sm dark:bg-white/[0.03] dark:text-white' : 'bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200' }}">
        Trésorerie
    </a>
</nav>