@props([
    'icon' => null,
    'title' => 'Tidak ada data',
    'message' => 'Belum ada data untuk ditampilkan.',
    'action' => null,
])

<div class="text-center py-8 sm:py-12 px-3 sm:px-4">
    @if($icon)
        <div class="inline-block mb-4">
            {!! $icon !!}
        </div>
    @else
        <svg class="mx-auto h-10 w-10 sm:h-12 sm:w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
        </svg>
    @endif
    <h3 class="mt-2 text-fluid-sm sm:text-base font-medium text-gray-900">{{ $title }}</h3>
    <p class="mt-1 text-fluid-sm text-gray-500 max-w-md mx-auto">{{ $message }}</p>
    @if($action)
        <div class="mt-6">
            {{ $action }}
        </div>
    @endif
</div>