@props([
    'title',
    'actionHref' => null,
    'actionLabel' => null,
    'backHref' => null,
])

<div class="mb-6 flex items-center justify-between gap-3">
    <h1 class="min-w-0 truncate text-xl font-semibold text-gray-800 leading-tight">{{ $title }}</h1>

    <div class="ml-auto flex items-center gap-2.5 shrink-0">
        @if ($actionHref && $actionLabel)
            <a
                href="{{ $actionHref }}"
                class="inline-flex items-center gap-1.5 rounded-lg bg-[#C5181E] px-3.5 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-[#8F1016]"
            >
                @if (strtolower($actionLabel) === 'edit')
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                @else
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                    </svg>
                @endif
                {{ $actionLabel }}
            </a>
        @endif

        {{ $slot }}

        @if ($backHref)
            <a
                href="{{ $backHref }}"
                class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3.5 py-2 text-sm font-medium text-gray-700 shadow-sm transition hover:border-gray-300 hover:bg-gray-50"
            >
                <svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
                </svg>
                Back
            </a>
        @endif
    </div>
</div>