{{-- Bài 10: Blade Component <x-card title="..." subtitle="..."> --}}
@props([
    'title'       => 'Tiêu đề Card',
    'subtitle'    => null,
    'headerClass' => 'bg-primary text-white',
])

<div {{ $attributes->merge(['class' => 'card border-0 shadow-sm mb-4']) }}>
    <div class="card-header {{ $headerClass }} py-3 d-flex justify-content-between align-items-center">
        <div>
            <h5 class="card-title mb-0 fw-bold">{{ $title }}</h5>
            @if($subtitle)
                <small class="opacity-75">{{ $subtitle }}</small>
            @endif
        </div>
        @isset($actions)
            <div>{{ $actions }}</div>
        @endisset
    </div>
    <div class="card-body">
        {{ $slot }}
    </div>
    @isset($footer)
        <div class="card-footer bg-white text-muted small">
            {{ $footer }}
        </div>
    @endisset
</div>