@props([
    'items' => [], // [ ['label' => 'KTP', 'href' => '/admin/services/ktp'], ['label' => 'Detail'] ]
])

{{-- Breadcrumb (component.md). Last item is rendered as current (non-link). --}}
<nav {{ $attributes->merge(['class' => 'flex items-center gap-1.5 text-sm text-secondary dark:text-dark-text-secondary animate-fade-in']) }}
     aria-label="Breadcrumb">
    <a href="{{ route('dashboard') }}" class="inline-flex items-center gap-1 transition-colors hover:text-gov-primary">
        <x-icon name="home" class="h-3.5 w-3.5" />
        <span>Beranda</span>
    </a>

    @foreach ($items as $item)
        <x-icon name="chevron-right" class="h-3 w-3 text-muted" />
        @if (! empty($item['href']) && ! $loop->last)
            <a href="{{ $item['href'] }}" class="transition-colors hover:text-gov-primary">{{ $item['label'] }}</a>
        @else
            <span class="font-medium text-primary dark:text-dark-text">{{ $item['label'] }}</span>
        @endif
    @endforeach
</nav>