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

<div {{ $attributes->merge(['class' => 'bg-white border border-zinc-200 rounded-sm shadow-sm overflow-hidden']) }}>
    @if($title || $description || isset($actions))
        <div class="px-4 py-3 border-b border-zinc-200 bg-zinc-50 flex justify-between items-center">
            <div>
                @if($title)
                    <h3 class="text-[11px] font-bold uppercase tracking-widest text-zinc-600">{{ $title }}</h3>
                @endif
                @if($description)
                    <p class="text-[9px] text-zinc-500 mt-0.5">{{ $description }}</p>
                @endif
            </div>
            @if(isset($actions))
                <div>
                    {{ $actions }}
                </div>
            @endif
        </div>
    @endif

    <div class="p-4">
        {{ $slot }}
    </div>

    @if($footer)
        <div class="p-4 bg-zinc-50/50 border-t border-zinc-200 flex justify-end">
            {{ $footer }}
        </div>
    @endif
</div>