@props([
    'title' => null,
    'subtitle' => null,
    'icon' => null,
    'padding' => true,
    'headerActions' => null,
])

<div {{ $attributes->merge(['class' => 'bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-soft']) }}>
    @if($title || $icon || $headerActions || isset($header))
        <div class="flex items-center justify-between px-5 py-4 border-b border-slate-200 dark:border-slate-800">
            <div class="flex items-center gap-3">
                @if($icon)
                    <div class="w-9 h-9 rounded-xl bg-primary-50 dark:bg-primary-500/10 flex items-center justify-center">
                        <i data-lucide="{{ $icon }}" class="w-4.5 w-[18px] h-[18px] text-primary-600 dark:text-primary-400"></i>
                    </div>
                @endif
                <div>
                    @if($title)
                        <h3 class="text-base font-semibold text-slate-900 dark:text-white leading-tight">{{ $title }}</h3>
                    @endif
                    @if($subtitle)
                        <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{{ $subtitle }}</p>
                    @endif
                </div>
            </div>
            @if($headerActions)
                <div class="flex items-center gap-2">
                    {{ $headerActions }}
                </div>
            @endif
            @isset($header)
                {{ $header }}
            @endisset
        </div>
    @endif
    <div @class(['px-5 py-4' => $padding])>
        {{ $slot }}
    </div>
    @isset($footer)
        <div class="px-5 py-3 border-t border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 rounded-b-2xl">
            {{ $footer }}
        </div>
    @endisset
</div>
