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

<style>
.custom-scrollbar::-webkit-scrollbar-button:single-button {
    display: none;
}
.custom-scrollbar::-webkit-scrollbar-button:single-button:horizontal:decrement,
.custom-scrollbar::-webkit-scrollbar-button:single-button:horizontal:increment {
    display: none;
}
</style>

<div class="border-b border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden custom-scrollbar" id="tabs-container">
    <nav class="-mb-px flex space-x-8 min-w-max">
        <a href="{{ route('provider.general-settings.index', ['tab' => 'general']) }}" 
           class="{{ $active === 'general' ? '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" {{ $active === 'general' ? 'id=active-tab' : '' }}>
            Paramètres généraux
        </a>
        <a href="{{ route('provider.general-settings.index', ['tab' => 'business']) }}" 
           class="{{ $active === 'business' ? '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" {{ $active === 'business' ? 'id=active-tab' : '' }}>
            Informations professionnelles
        </a>
        <a href="{{ route('provider.general-settings.index', ['tab' => 'address']) }}" 
           class="{{ $active === 'address' ? '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" {{ $active === 'address' ? 'id=active-tab' : '' }}>
            Adresse de facturation
        </a>
    </nav>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const activeTab = document.getElementById('active-tab');
    const container = document.getElementById('tabs-container');
    if (activeTab && container) {
        activeTab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
    }
});
</script>