@props(['selected'])

<div class="w-full border-b border-gray-200">
    {{-- Tabs --}}
    <div class="flex items-center justify-start gap-8">
        {{-- Tab: Tipos de entornos --}}
        <a href="{{ route('configurations.environments-types.index') }}"
            class="relative pb-2 transition-colors duration-200
            {{ $selected === 'environments-types'
                ? 'text-gray-800 font-semibold'
                : 'text-gray-500 font-normal hover:text-gray-700'
            }}">
            <span>Tipos de entornos</span>
            @if($selected === 'environments-types')
                <div class="absolute bottom-0 left-0 right-0 h-1 bg-3ip"></div>
            @endif
        </a>

        {{-- Tab: Roles --}}
        <a href="{{ route('configurations.roles.index') }}"
            class="relative pb-2 transition-colors duration-200
            {{ $selected === 'roles'
                ? 'text-gray-800 font-semibold'
                : 'text-gray-500 font-normal hover:text-gray-700'
            }}">
            <span>Roles</span>
            @if($selected === 'roles')
                <div class="absolute bottom-0 left-0 right-0 h-1 bg-3ip"></div>
            @endif
        </a>

        {{-- Tab: Permisos del sistema --}}
        <a href="{{ route('configurations.permissions.index') }}"
            class="relative pb-2 transition-colors duration-200
            {{ $selected === 'permissions'
                ? 'text-gray-800 font-semibold'
                : 'text-gray-500 font-normal hover:text-gray-700'
            }}">
            <span>Permisos del sistema</span>
            @if($selected === 'permissions')
                <div class="absolute bottom-0 left-0 right-0 h-1 bg-3ip"></div>
            @endif
        </a>

        {{-- Tab: Productos --}}
        <a href="{{ route('configurations.products.index') }}"
            class="relative pb-2 transition-colors duration-200
            {{ $selected === 'products'
                ? 'text-gray-800 font-semibold'
                : 'text-gray-500 font-normal hover:text-gray-700'
            }}">
            <span>Productos</span>
            @if($selected === 'products')
                <div class="absolute bottom-0 left-0 right-0 h-1 bg-3ip"></div>
            @endif
        </a>
    </div>
</div>