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

{{--
    $items: array of ['label' => string, 'href' => string|null]
    Last item is the current page — no link, no href needed.

    Example:
    <x-breadcrumb :items="[
        ['label' => 'Jackets', 'href' => '/category/jackets'],
        ['label' => 'Leather Jacket'],
    ]" />
--}}

<nav aria-label="Breadcrumb">
    <ol {{ $attributes->merge(['class' => 'flex items-center flex-wrap gap-1 text-base text-black']) }}>
        @foreach ($items as $index => $item)
            <li class="flex items-center gap-1">
                @if (!$loop->first)
                    <span aria-hidden="true">/</span>
                @endif

                @if (!empty($item['href']))
                    <a href="{{ $item['href'] }}" class="underline-slide [--slide-h:1px]">{{ $item['label'] }}</a>
                @else
                    <span class="pb-1" aria-current="page">{{ $item['label'] }}</span>
                @endif
            </li>
        @endforeach
    </ol>
</nav>