{{--
    Tile for the HMIS module grid: a sky-blue line icon, a title, an optional small label and optional extra content (the slot).
    Renders an <li>, so place it inside a <ul>. Usage: <x-module-card icon="bed" title="IPD Management" label="Clinical care" />
--}}
@props(['icon', 'title', 'label' => null])

<li data-reveal {{ $attributes->merge(['class' => 'group flex flex-col items-center rounded-2xl border border-slate-200 bg-white px-3 pb-4 pt-5 text-center shadow-sm transition hover:border-sky-200 hover:shadow-lg hover:shadow-sky-500/10 motion-safe:hover:-translate-y-1']) }}>
    <span class="icon-tile h-14 w-14 rounded-2xl transition-colors duration-200 group-hover:bg-sky-500 group-hover:text-white group-hover:ring-sky-500">
        <x-icon :name="$icon" class="h-7 w-7" />
    </span>
    <h3 class="mt-3 text-[13px] font-semibold leading-snug text-slate-900 sm:text-sm">{{ $title }}</h3>

    @if ($label)
        <p class="mt-1 text-[11px] text-slate-500">{{ $label }}</p>
    @endif

    {{ $slot }}
</li>