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

<nav aria-label="breadcrumb">
    <ol class="breadcrumb float-sm-right bg-transparent p-0 m-0" style="font-size: 0.95rem;">
        
        {{-- Inicio / Home (Icono destacado) --}}
        <li class="breadcrumb-item">
            <a href="{{ route('home') }}" class="text-secondary" title="Ir al Inicio">
                <i class="fas fa-home"></i>
            </a>
        </li>
        
        {{-- Iteración de Rutas --}}
        @foreach($paths as $label => $link)
            @if(!$loop->last)
                {{-- Eslabón intermedio (Link Azul) --}}
                <li class="breadcrumb-item">
                    <a href="{{ $link }}" class="text-primary font-weight-bold" style="text-decoration: none;">
                        {{ $label }}
                    </a>
                </li>
            @else
                {{-- Eslabón final (Texto Gris / Activo) --}}
                <li class="breadcrumb-item active text-dark font-weight-bold" aria-current="page">
                    {{ $label }}
                </li>
            @endif
        @endforeach
    </ol>
</nav>



{{-- <x-breadcrumbs :paths="[
    'Inventario' => route('productos.index'),
    'Categorías' => route('categorias.index'),
    'Editar'     => '#'
]" /> --}}