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

{{-- Page title + icon on the left, action buttons (slot: actions) on the right. --}}
<div class="mb-4 pt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <div class="flex items-center gap-3">
        @if ($icon)
            <span class="flex h-9 w-9 items-center justify-center rounded-xl"
                  style="background:var(--color-primary-soft);color:var(--color-primary-700);">
                <i data-lucide="{{ $icon }}" style="width:18px;height:18px;"></i>
            </span>
        @endif
        <div>
            <h1 class="rf-page-title">{{ $title }}</h1>
            @if ($subtitle)
                <p class="text-sm" style="color:var(--color-text-muted);">{{ $subtitle }}</p>
            @endif
        </div>
    </div>

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