@props([
    'icon' => 'fas fa-inbox',
    'title' => 'Belum ada data',
    'description' => 'Data tidak ditemukan atau belum ditambahkan ke sistem.',
    'actionUrl' => null,
    'actionLabel' => null
])

<div class="text-center py-5 px-4 my-4 rounded-xl shadow-sm border bg-white" style="border-radius: 12px; border-color: #e2e8f0 !important; background: #ffffff;">
    <div class="text-muted mb-3">
        <i class="{{ $icon }} fa-3x" style="color: #cbd5e1;"></i>
    </div>
    <h5 class="font-weight-bold text-dark mb-1">{{ $title }}</h5>
    <p class="text-secondary mb-4 mx-auto" style="max-width: 400px; font-size: 0.9rem;">
        {{ $description }}
    </p>
    @if ($actionUrl && $actionLabel)
        <a href="{{ $actionUrl }}" class="btn btn-primary font-weight-bold px-4 py-2" style="border-radius: 8px;">
            {{ $actionLabel }}
        </a>
    @endif
</div>