@props([
    'title' => 'Nothing here yet',
    'description' => 'There is no data to display right now.',
    'icon' => null,
    'actionLabel' => null,
    'actionRoute' => null,
])

@php
$defaultIcon = '<path d="M12 8v4m0 4h.01M4.93 19h14.14c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.2 16c-.77 1.33.19 3 1.73 3z" />';
@endphp

<div {{ $attributes->merge(['class' => 'rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-6 py-12 text-center dark:border-slate-600 dark:bg-slate-800/60']) }}>
    <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-slate-100 text-slate-300 dark:bg-slate-700 dark:text-slate-500">
        <svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            {!! $icon ?: $defaultIcon !!}
        </svg>
    </div>

    <h3 class="mt-5 text-xl font-semibold text-slate-800 dark:text-slate-100">{{ $title }}</h3>
    <p class="mx-auto mt-2 max-w-md text-sm text-slate-500 dark:text-slate-400">{{ $description }}</p>

    @if($actionLabel && $actionRoute)
        <div class="mt-6">
            <x-button :href="$actionRoute" variant="primary" icon="plus">{{ $actionLabel }}</x-button>
        </div>
    @endif
</div>