@props([
    'icon' => 'sparkles',
    'title' => 'Belum ada apa-apa di sini',
    'message' => null,
    'actionUrl' => null,
    'actionLabel' => null,
])

<div class="card surface-pattern relative overflow-hidden p-10 text-center">
    <span class="relative mx-auto mb-3 grid h-14 w-14 place-items-center rounded-2xl bg-primary/10">
        <x-icon :name="$icon" class="w-7 h-7 text-primary"/>
    </span>
    <h3 class="relative text-h4">{{ $title }}</h3>
    @if($message)<p class="relative mt-1 text-body text-muted prose-body mx-auto">{{ $message }}</p>@endif
    @if($actionUrl)
        <a href="{{ $actionUrl }}" class="btn-filled relative mt-4">{{ $actionLabel ?? 'Mulai' }}</a>
    @endif
    {{ $slot }}
</div>