@props(['icon', 'title'])

<div {{ $attributes->merge(['class' => 'flex flex-col items-center gap-3 px-6 py-16 text-center']) }}>
    <span class="flex size-12 items-center justify-center rounded-full bg-slate-100 text-slate-400">
        <x-icon :name="$icon" class="size-6" />
    </span>
    <p class="text-sm font-medium text-slate-600">{{ $title }}</p>
    @if (trim($slot) !== '')
        <p class="max-w-72 text-[13px] text-slate-500">{{ $slot }}</p>
    @endif
</div>