@props(['title' => '', 'action' => null, 'actionUrl' => null, 'actionLabel' => 'Ajouter'])

<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
    @if($title || $action || $actionUrl)
    <div class="px-4 sm:px-6 py-4 border-b border-slate-200 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        @if($title)
            <h2 class="font-semibold text-slate-800 text-lg">{{ $title }}</h2>
        @endif
        @if($actionUrl)
            <a href="{{ $actionUrl }}" class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors shrink-0">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                {{ $actionLabel }}
            </a>
        @elseif($action)
            <button type="button" @@click="{{ $action }}" class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors shrink-0">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                {{ $actionLabel }}
            </button>
        @endif
    </div>
    @endif
    <div class="p-4 sm:p-6">
        {{ $slot }}
    </div>
</div>