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

<nav x-data x-init="$nextTick(() => $el.querySelector('.bg-white')?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }))" class="flex overflow-x-auto 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.tax-settings.index') }}" 
       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 === 'taxes' ? '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' }}">
        Taxes et TVA
    </a>
    <a href="{{ route('provider.general-settings.index', ['tab' => 'general']) }}" 
       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 === 'fiscal' ? '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
    </a>
    <a href="{{ route('provider.appointment-settings.index', ['tab' => 'services']) }}" 
       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 === 'services' ? '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' }}">
        Rendez-vous
    </a>
    <a href="{{ route('provider.calendar-settings.index') }}" 
       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 === 'calendar' ? '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' }}">
        Calendrier
    </a>
    <a href="{{ route('provider.client-settings.index', ['tab' => 'tags']) }}" 
       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 === 'clients' ? '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' }}">
        Client
    </a>
    <a href="{{ route('provider.expense-settings.index', ['tab' => 'types']) }}" 
       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 === 'expenses' ? '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>
</nav>