@props(['title' => null, 'description' => null, 'icon' => null, 'padding' => true])
<section {{ $attributes->merge(['class' => 'card']) }}>
    @if ($title || isset($actions))
        <header class="card-header">
            {{-- The title may wrap inside its block, so short actions stay on the same line. --}}
            <div class="flex min-w-0 flex-[1_1_12rem] items-center gap-3">
                @if ($icon)
                    <span class="icon-tile size-8 tone-brand"><x-icon :name="$icon" class="size-[18px]" /></span>
                @endif
                <div class="min-w-0">
                    @if ($title)<h2 class="card-title">{{ $title }}</h2>@endif
                    @if ($description)<p class="mt-0.5 text-xs text-slate-500">{{ $description }}</p>@endif
                </div>
            </div>
            @isset($actions)
                <div class="flex flex-none flex-wrap items-center gap-2">{{ $actions }}</div>
            @endisset
        </header>
    @endif
    <div @class(['card-body' => $padding])>
        {{ $slot }}
    </div>
    @isset($footer)
        <footer class="flex flex-wrap items-center justify-end gap-2 rounded-b-xl border-t border-slate-100 bg-slate-50/60 px-5 py-3">
            {{ $footer }}
        </footer>
    @endisset
</section>