@props([
    'title' => 'Tiada data',
    'description' => null,
])

<div {{ $attributes->merge(['class' => 'flex flex-col items-center justify-center rounded-xl border border-dashed border-gray-300 bg-slate-50/80 px-6 py-14 text-center']) }}>
    <div class="rounded-full bg-brand-50 p-3 text-brand-800 ring-1 ring-brand-900/10">
        <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V7a2 2 0 00-2-2H6a2 2 0 00-2 2v6m16 0v4a2 2 0 01-2 2H6a2 2 0 01-2-2v-4m16 0h-2M4 13h2m12 0h2"/></svg>
    </div>
    <h3 class="mt-4 text-base font-semibold text-gray-900">{{ $title }}</h3>
    @if ($description)
        <p class="mt-2 max-w-md text-sm text-gray-600">{{ $description }}</p>
    @endif
    @isset($action)
        <div class="mt-6">{{ $action }}</div>
    @endisset
</div>