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

<div class="mb-6 flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
    <div>
        @if (count($breadcrumbs))
            <nav class="flex items-center gap-1 text-xs text-gray-400 mb-1.5">
                @foreach ($breadcrumbs as $crumb)
                    @if (! $loop->last)
                        <a href="{{ $crumb['url'] }}" class="hover:text-gray-600 transition-colors">{{ $crumb['label'] }}</a>
                        <svg class="w-3 h-3 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>
                    @else
                        <span class="text-gray-600">{{ $crumb['label'] }}</span>
                    @endif
                @endforeach
            </nav>
        @endif

        <h1 class="text-xl font-bold text-gray-900">{{ $title }}</h1>
    </div>

    @isset($actions)
        <div class="flex items-center gap-2 shrink-0">
            {{ $actions }}
        </div>
    @endisset
</div>