@props([
    /**
     * Array of breadcrumb items in the form:
     * [ ['label' => 'Dashboard', 'url' => route('admin.dashboard')], ['label' => 'Games', 'active' => true] ]
     * If 'active' is set, that item gets the active class; otherwise the last item is active by default.
     */
    'items' => [],
    /**
     * Page title below the breadcrumb
     */
    'title' => null,
    /**
     * Optional CSS classes for the wrapper
     */
    'class' => '',
])

@php
    // Determine active index: first item with 'active' truthy, else last
    $activeIndex = null;
    foreach ($items as $idx => $item) {
        if (isset($item['active']) && $item['active']) {
            $activeIndex = $idx;
            break;
        }
    }
    if ($activeIndex === null) {
        $activeIndex = count($items) - 1;
    }
@endphp

<div class="d-flex align-items-center justify-content-between page-header-breadcrumb flex-wrap gap-2 {{ $class }}">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                @foreach($items as $idx => $item)
                    @php
                        $isActive = $idx === $activeIndex;
                    @endphp
                    @if(!$isActive && isset($item['url']))
                        <li class="breadcrumb-item">
                            <a href="{{ $item['url'] }}">{{ $item['label'] }}</a>
                        </li>
                    @else
                        <li class="breadcrumb-item active" aria-current="page">
                            {{ $item['label'] }}
                        </li>
                    @endif
                @endforeach
            </ol>
        </nav>
        @if($title)
            <h1 class="page-title fw-medium fs-18 mb-0">{{ $title }}</h1>
        @endif
    </div>
</div>