@props(['icon' => 'cube', 'title' => 'Belum ada data', 'message' => null])

<div class="flex flex-col items-center py-12 text-center">
    <div class="text-gray-300 dark:text-muted-foreground/40 mb-4">
        <x-ui.icon :name="$icon" size="w-12 h-12" />
    </div>
    <p class="text-gray-500 dark:text-muted-foreground font-medium">{{ $title }}</p>
    @if ($message)<p class="text-sm text-gray-400 dark:text-muted-foreground/60 mt-1">{{ $message }}</p>@endif
    @isset($action)<div class="mt-4">{{ $action }}</div>@endisset
</div>