@props([
    'icon' => 'document',
    'title' => 'Tidak ada data',
    'description' => null,
    'actionLabel' => null,
    'actionLink' => null,
])

{{-- EmptyState (component.md) — centered illustration + message + optional CTA. --}}
<div {{ $attributes->merge(['class' => 'flex flex-col items-center justify-center px-6 py-16 text-center']) }}>
    <div class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gov-50 text-gov-primary dark:bg-gov-primary/10">
        <x-icon :name="$icon" class="h-8 w-8" />
    </div>
    <h3 class="text-xl font-semibold text-primary dark:text-dark-text">{{ $title }}</h3>
    @if ($description)
        <p class="mx-auto mt-1 max-w-xs text-sm text-secondary dark:text-dark-text-secondary">{{ $description }}</p>
    @endif
    @if ($actionLabel && $actionLink)
        <a href="{{ $actionLink }}" class="btn-primary mt-5">{{ $actionLabel }}</a>
    @endif

    @isset($slot)
        {{ $slot }}
    @endisset
</div>