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

@php
    $total = count($items);
@endphp

<nav aria-label="Ruta de navegación"
     {{ $attributes->merge(['class' => 'font-sans text-sm text-on-surface-muted']) }}>
    <ol class="flex flex-wrap items-center gap-2"
        itemscope
        itemtype="https://schema.org/BreadcrumbList">
        @foreach ($items as $index => $item)
            @php $isLast = $index === $total - 1; @endphp

            <li class="flex items-center gap-2"
                itemprop="itemListElement"
                itemscope
                itemtype="https://schema.org/ListItem">
                @if (! $isLast && ! empty($item['url']))
                    <a href="{{ $item['url'] }}" itemprop="item"
                       class="transition-colors duration-fast ease-out-soft hover:text-accent-text focus-visible:text-accent-text">
                        <span itemprop="name">{{ $item['label'] }}</span>
                    </a>
                @else
                    <span itemprop="name" class="text-on-surface" @if ($isLast) aria-current="page" @endif>
                        {{ $item['label'] }}
                    </span>
                @endif

                <meta itemprop="position" content="{{ $index + 1 }}">

                @if (! $isLast)
                    <span aria-hidden="true" class="text-on-surface-muted/50">/</span>
                @endif
            </li>
        @endforeach
    </ol>
</nav>