@props([
    'title' => null, // Optional title, can be passed directly or replaced with header slot
    'classes' => NULL, // Additional classes for the card container
])

<div class="rounded-2xl border border-gray-200 dark:border-gray-800 {{ isset($classes) ? $classes : 'dark:bg-white/[0.03] bg-white'   }}">

    {{-- Header --}}
    @if ($title || isset($header))
        <div class="px-5 py-4 sm:px-6 sm:py-5 border-b border-gray-100 dark:border-gray-800">
            <div class="justify-between flex">
                @if ($title)
                    <h3 class="text-xl font-bold text-gray-800 dark:text-white/90">
                        {{ lang_trans($title) }}
                    </h3>
                @endif
                @if (isset($header))
                    {{ $header }}
                @endif
            </div>
        </div>
    @endif

    {{-- Body --}}
    <div class="space-y-6 {{ isset($classes) ? "p-0" : "p-5" }}  sm:p-6">
        {{ $slot }}
    </div>

    {{-- Footer --}}
    @isset($footer)
        <div class="flex justify-end px-5 py-4 sm:px-6 sm:py-5 border-t border-gray-100 dark:border-gray-800">
            {{ $footer }}
        </div>
    @endisset
</div>