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

<nav aria-label="Breadcrumb" {{ $attributes->class('text-sm') }}>
    <ol class="flex flex-wrap items-center gap-1.5 text-slate-500">
        @foreach ($items as $item)
            <li class="flex items-center gap-1.5">
                @if (! $loop->last && ($item['url'] ?? false))
                    <a href="{{ $item['url'] }}" class="hover:text-brand-700 hover:underline">{{ $item['label'] }}</a>
                    <svg class="h-3 w-3 text-slate-300" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M7.3 14.7a1 1 0 0 1 0-1.4L10.6 10 7.3 6.7a1 1 0 0 1 1.4-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.4 0Z" clip-rule="evenodd" />
                    </svg>
                @else
                    <span class="font-medium text-slate-800" aria-current="page">{{ $item['label'] }}</span>
                @endif
            </li>
        @endforeach
    </ol>
</nav>
