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

<nav aria-label="breadcrumb" class="breadcrumb-nav mb-3">
    <ol class="breadcrumb-modern">
        <li class="breadcrumb-item">
            <a href="{{ route('dashboard') }}">
                <i class="bi bi-house-door"></i>
                <span>Dashboard</span>
            </a>
        </li>
        
        @foreach($items as $item)
            @if(isset($item['active']) && $item['active'])
                <li class="breadcrumb-item active" aria-current="page">
                    @if(isset($item['icon']))
                    <i class="bi bi-{{ $item['icon'] }}"></i>
                    @endif
                    <span>{{ $item['label'] }}</span>
                </li>
            @else
                <li class="breadcrumb-item">
                    <a href="{{ $item['url'] }}">
                        @if(isset($item['icon']))
                        <i class="bi bi-{{ $item['icon'] }}"></i>
                        @endif
                        <span>{{ $item['label'] }}</span>
                    </a>
                </li>
            @endif
        @endforeach
    </ol>
</nav>

<style>
    .breadcrumb-nav {
        background: white;
        padding: 16px 20px;
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    
    .breadcrumb-modern {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
        flex-wrap: wrap;
    }
    
    .breadcrumb-item {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        margin: 0 12px;
        background: #d1d5db;
        border-radius: 50%;
    }
    
    .breadcrumb-item a {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #6b7280;
        text-decoration: none;
        transition: all 0.2s;
        padding: 4px 8px;
        border-radius: 6px;
    }
    
    .breadcrumb-item a:hover {
        color: #667eea;
        background: #f3f4f6;
    }
    
    .breadcrumb-item.active {
        color: #374151;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .breadcrumb-item i {
        font-size: 1rem;
    }
    
    @media (max-width: 768px) {
        .breadcrumb-nav {
            padding: 12px 16px;
        }
        
        .breadcrumb-item {
            font-size: 0.85rem;
        }
        
        .breadcrumb-item + .breadcrumb-item::before {
            margin: 0 8px;
            width: 4px;
            height: 4px;
        }
        
        .breadcrumb-item span {
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
</style>