@props(['title' => null, 'action' => null, 'actionLabel' => null, 'padded' => true])

<section {{ $attributes->merge(['class' => 'portal-card overflow-hidden']) }}>
    @if($title)
        <header class="flex items-center justify-between gap-3 px-4 pt-4">
            <h2 class="text-sm font-bold">{{ $title }}</h2>
            @if($action)
                <a href="{{ $action }}" wire:navigate class="text-xs font-semibold" style="color: var(--brand-600);">
                    {{ $actionLabel ?? __('عرض الكل') }}
                </a>
            @endif
        </header>
    @endif

    <div @class(['px-4 pb-4', 'pt-3' => $title, 'pt-4' => ! $title, 'p-0' => ! $padded])>
        {{ $slot }}
    </div>
</section>
