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

@php
    $hasHeader = filled($title) || filled($subtitle) || isset($icon);
@endphp

<div {{ $attributes->merge(['class' => 'bg-white rounded-xl border border-gray-200 shadow-sm p-5 flex flex-col']) }}>
    @if ($hasHeader)
        <div class="flex items-start justify-between gap-3">
            <div>
                @if (filled($title))
                    <h3 class="text-base font-semibold text-gray-900">
                        {{ $title }}
                    </h3>
                @endif
                @if($subtitle)
                    <p class="{{ filled($title) ? 'mt-0.5' : '' }} text-xs text-gray-500">
                        {{ $subtitle }}
                    </p>
                @endif
            </div>

            @isset($icon)
                <div class="text-gray-400">
                    {{ $icon }}
                </div>
            @endisset
        </div>
    @endif

    <div class="{{ $hasHeader ? 'mt-4' : '' }} text-sm text-gray-700 flex-1">
        {{ $slot }}
    </div>

    @isset($actions)
        <div class="mt-4">
            {{ $actions }}
        </div>
    @endisset
</div>