@props(['title', 'description' => null, 'actionLabel' => null, 'actionHref' => null])

<div class="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-gray-200 bg-white py-12 text-center">
    <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
        {{ $icon ?? '' }}
    </div>
    <p class="mt-4 text-sm font-semibold text-gray-900">{{ $title }}</p>
    @if($description)
        <p class="mt-1 text-sm text-gray-500">{{ $description }}</p>
    @endif
    @if($actionLabel && $actionHref)
        <a href="{{ $actionHref }}"
           class="mt-4 inline-flex items-center gap-2 rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700">
            {{ $actionLabel }}
        </a>
    @endif
</div>
