@props([
    'title' => '',
    'subtitle' => '',
    'breadcrumbs' => []
])

<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
    <div>
        <h1 class="text-dark font-weight-bold mb-1" style="font-size: 1.8rem;">
            {{ $title }}
        </h1>
        @if ($subtitle)
            <p class="text-muted mb-0" style="font-size: 0.95rem;">{{ $subtitle }}</p>
        @endif
        @if (!empty($breadcrumbs))
            <ol class="breadcrumb bg-transparent p-0 mt-2 mb-0" style="font-size: 0.85rem;">
                @foreach ($breadcrumbs as $label => $url)
                    @if ($loop->last)
                        <li class="breadcrumb-item active text-secondary">{{ $label }}</li>
                    @else
                        <li class="breadcrumb-item">
                            <a href="{{ $url }}" style="color: var(--primary-color); font-weight: 500;">
                                {{ $label }}
                            </a>
                        </li>
                    @endif
                @endforeach
            </ol>
        @endif
    </div>
    @if (isset($buttons))
        <div class="d-flex align-items-center" style="gap: 8px;">
            {{ $buttons }}
        </div>
    @endif
</div>