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

<nav aria-label="breadcrumb">
    <ol class="breadcrumb d-flex flex-row align-items-center mb-0">
        <li class="breadcrumb-item">
            <a href="{{ route('dashboard') }}"
                class="d-flex align-items-center text-muted text-decoration-none transition-colors hover-text-primary">
                <i data-lucide="home" style="width: 18px; height: 18px;"></i>
            </a>
        </li>
        @foreach($items as $item)
            @if(!empty($item['active']))
                <li class="breadcrumb-item active d-flex align-items-center text-primary fw-bold" aria-current="page">
                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill px-3 py-2">
                        {{ $item['label'] }}
                    </span>
                </li>
            @else
                <li class="breadcrumb-item d-flex align-items-center">
                    @if(isset($item['url']))
                        <a href="{{ $item['url'] }}" class="text-dark text-decoration-none fw-medium hover-text-primary">
                            {{ $item['label'] }}
                        </a>
                    @else
                            <span class="text-muted">{{ $item['label'] }}</span>
                        @endif
                </li>
            @endif
        @endforeach
    </ol>
</nav>

<style>
    .breadcrumb-item+.breadcrumb-item::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
        vertical-align: middle;
        margin-top: 1px;
    }

    .hover-text-primary:hover {
        color: var(--bs-primary) !important;
    }

    .bg-primary-subtle {
        background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    }

    .border-primary-subtle {
        border-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    }
</style>