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

<nav aria-label="Breadcrumb" {{ $attributes->merge(['class' => 'mb-3']) }}>
    <ol class="flex flex-wrap items-center gap-1 text-sm text-[var(--color-text-muted)]">
        @foreach ($items as $index => $item)
            @php
                $label = is_array($item) ? ($item['label'] ?? '') : (string) $item;
                $url = is_array($item) ? ($item['url'] ?? null) : null;
                $isLast = $index === array_key_last($items);
            @endphp
            <li class="inline-flex items-center gap-1">
                @if ($index > 0)
                    <x-ui.icon name="chevron-right" class="h-3.5 w-3.5 opacity-60" />
                @endif

                @if ($url && ! $isLast)
                    <a href="{{ $url }}" class="hover:text-[var(--color-primary)]">{{ $label }}</a>
                @else
                    <span @class(['text-[var(--color-text)] font-medium' => $isLast])>{{ $label }}</span>
                @endif
            </li>
        @endforeach
    </ol>
</nav>