{{-- Blog breadcrumb navigation (Story 5.8) --}}
@props([
'items' => [],
])

<nav aria-label="Breadcrumb" class="max-w-7xl mx-auto px-4 py-4">
    <ol class="flex items-center gap-2 text-sm text-muted-foreground">
        @foreach($items as $index => $item)
        @if($index > 0)
        <li aria-hidden="true" class="text-muted-foreground/50">/</li>
        @endif

        @if($loop->last)
        <li aria-current="page" class="text-foreground font-medium">
            {{ $item['label'] }}
        </li>
        @else
        <li>
            <a href="{{ $item['url'] }}" class="hover:text-primary transition-colors">
                {{ $item['label'] }}
            </a>
        </li>
        @endif
        @endforeach
    </ol>
</nav>