@props([
    'title',
    'body' => null,
    'icon' => 'fe fe-inbox',
])

<div class="card border-0 shadow-sm">
    <div class="card-body p-4 p-md-5">
        <div class="d-flex align-items-start gap-3">
            <span
                class="avatar avatar-lg rounded d-inline-flex align-items-center justify-content-center flex-shrink-0"
                style="background: {{ config('theme.gradients.info') }};">
                <i class="{{ $icon }} text-white fs-24"></i>
            </span>
            <div class="flex-grow-1">
                <h5 class="fw-semibold mb-2" style="color: {{ config('theme.colors.text') }};">
                    {{ $title }}
                </h5>

                @if ($body)
                    <p class="text-muted mb-3">{{ $body }}</p>
                @endif

                @isset($actions)
                    <div class="d-flex flex-wrap gap-2">
                        {{ $actions }}
                    </div>
                @endisset
            </div>
        </div>
    </div>
</div>

