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

<div {{ $attributes->merge(['class' => 'tw-card']) }}>
    @if ($title)
        <div class="flex items-center justify-between gap-3 border-b border-[var(--color-border)] bg-[color-mix(in_srgb,var(--color-bg)_55%,transparent)] px-4 py-3">
            <h3 class="text-sm font-semibold tracking-tight text-[var(--color-text)]">{{ $title }}</h3>
            @isset($headerActions)
                <div class="flex items-center gap-2">{{ $headerActions }}</div>
            @endisset
        </div>
    @endif

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

    @isset($footer)
        <div class="border-t border-[var(--color-border)] px-4 py-3">
            {{ $footer }}
        </div>
    @endisset
</div>