{{--
    Breadcrumb Component
    Props:
      $items – array of { label, url? }  (last item = current page, no url needed)

    Usage:
      <x-layouts.admin.breadcrumb :items="[
          ['label'=>'Dashboard','url'=>route('admin.dashboard')],
          ['label'=>'Users','url'=>route('admin.dashboard')],
          ['label'=>'Edit User'],
      ]"/>
--}}
@props(['items' => []])

<nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-sm">
    <a href="{{ route('admin.dashboard') }}"
        class="text-surface-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
        </svg>
    </a>

    @foreach($items as $index => $item)
    <svg class="w-4 h-4 text-surface-300 dark:text-surface-600 flex-shrink-0"
        fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
    </svg>
    @if($loop->last || !isset($item['url']))
    <span class="font-medium text-surface-900 dark:text-surface-100">{{ $item['label'] }}</span>
    @else
    <a href="{{ $item['url'] }}"
        class="text-surface-500 hover:text-primary-600 dark:text-surface-400 dark:hover:text-primary-400 transition-colors">
        {{ $item['label'] }}
    </a>
    @endif
    @endforeach
</nav>