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

<div class="border-b border-gray-200 dark:border-gray-700">
    <nav class="-mb-px flex space-x-8">
        <a href="{{ route('provider.expense-settings.index', ['tab' => 'types']) }}" 
           class="{{ $active === 'types' ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors">
            Catégories d'achats
        </a>
        <a href="{{ route('provider.expense-settings.index', ['tab' => 'suppliers']) }}" 
           class="{{ $active === 'suppliers' ? 'text-primary dark:text-primary-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }} whitespace-nowrap py-2 px-1 text-sm font-medium transition-colors">
            Fournisseurs
        </a>
    </nav>
</div>