@props([
    'items' => [],
])

@if(!empty($items))
<nav aria-label="Breadcrumb" class="bg-white border-b border-gray-200">
    <div class="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
        <ol class="flex items-center flex-wrap gap-2 text-sm">
            {{-- Home Link --}}
            <li class="inline-flex items-center">
                <a href="{{ route('home') }}" class="text-blue-600 hover:text-blue-800 hover:underline transition">
                    <i class="fas fa-home"></i>
                    <span class="ml-1 hidden sm:inline">Home</span>
                </a>
            </li>
            
            {{-- Breadcrumb Items --}}
            @foreach($items as $index => $item)
                <li class="inline-flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i>
                    
                    @if($loop->last)
                        {{-- Current Page (Non-clickable) --}}
                        <span class="text-gray-500 truncate max-w-xs">
                            {{ $item['label'] ?? $item }}
                        </span>
                    @else
                        {{-- Intermediate Links --}}
                        <a href="{{ $item['url'] ?? '#' }}" 
                           class="text-blue-600 hover:text-blue-800 hover:underline transition truncate max-w-xs">
                            {{ $item['label'] ?? $item }}
                        </a>
                    @endif
                </li>
            @endforeach
        </ol>
    </div>
</nav>
@endif
