@props(['name', 'value' => '1', 'checked' => false, 'title', 'description' => null, 'icon' => null])

<label class="relative flex cursor-pointer items-start gap-3 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm transition hover:border-primary/40 [&:has(:checked)]:border-primary [&:has(:checked)]:ring-4 [&:has(:checked)]:ring-primary/10">
    <input type="checkbox" name="{{ $name }}" value="{{ $value }}" @checked($checked)
           class="mt-1 rounded border-slate-300 text-primary focus:ring-primary">
    <span class="flex-1">
        <span class="flex items-center gap-2 font-semibold text-slate-800">
            @if ($icon)<i class="fa-solid {{ $icon }} text-primary" aria-hidden="true"></i>@endif
            {{ $title }}
        </span>
        @if ($description)
            <span class="mt-1 block text-sm text-slate-500">{{ $description }}</span>
        @endif
    </span>
</label>