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

<section {{ $attributes->merge(['class' => 'rounded-lg border border-border bg-card text-card-foreground shadow-sm']) }}>
    @if ($title || $description || isset($header))
        <div class="space-y-1.5 px-6 pt-6 pb-4">
            @isset($header)
                {{ $header }}
            @else
                @if ($title)
                    <h2 class="text-lg font-semibold leading-none tracking-normal">{{ $title }}</h2>
                @endif

                @if ($description)
                    <p class="text-sm text-muted-foreground">{{ $description }}</p>
                @endif
            @endisset
        </div>
    @endif

    <div @class([
        'px-6 pb-6',
        'pt-0' => $title || $description || isset($header),
        'pt-6' => ! $title && ! $description && ! isset($header),
    ])>
        {{ $slot }}
    </div>

    @isset($footer)
        <div class="flex items-center justify-end gap-2 border-t border-border px-6 py-4">
            {{ $footer }}
        </div>
    @endisset
</section>