@props(['name', 'value', 'image', 'label' => null, 'checked' => false])

<label class="relative block cursor-pointer overflow-hidden rounded-xl border-2 border-transparent transition [&:has(:checked)]:border-primary">
    <input type="radio" name="{{ $name }}" value="{{ $value }}" @checked($checked) class="peer sr-only">
    <img src="{{ $image }}" alt="{{ $label }}" class="aspect-square w-full object-cover" loading="lazy">
    <span class="absolute inset-0 bg-primary/0 transition peer-checked:bg-primary/10"></span>
    <span class="absolute right-2 top-2 hidden h-5 w-5 place-items-center rounded-full bg-primary text-white peer-checked:grid">
        <i class="fa-solid fa-check text-xs" aria-hidden="true"></i>
    </span>
    @if ($label)
        <span class="block px-2 py-1.5 text-center text-xs font-medium text-slate-600">{{ $label }}</span>
    @endif
</label>