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

<div class="-mx-5 mb-5 flex items-center gap-3 border-y border-surface-100 bg-gradient-to-r from-surface-50/90 to-white px-5 py-4 sm:-mx-6 sm:px-6">
    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary-50 text-primary-600">
        @if($icon === 'image')
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M4 5h16v14H4V5zm0 11l4-4 3 3 2-2 7 6M15 9h.01"/></svg>
        @elseif($icon === 'security')
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M8 11V8a4 4 0 118 0v3m-9 0h10a1 1 0 011 1v8H6v-8a1 1 0 011-1z"/></svg>
        @else
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M5 4h14v16H5V4zm4 4h6m-6 4h6m-6 4h4"/></svg>
        @endif
    </div>
    <div class="min-w-0">
        <h3 class="text-base font-bold text-surface-900">{{ $title }}</h3>
        @if($description)<p class="mt-0.5 text-xs text-surface-500">{{ $description }}</p>@endif
    </div>
    @isset($actions)<div class="ml-auto shrink-0">{{ $actions }}</div>@endisset
</div>