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

<label class="flex cursor-pointer items-start gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition duration-150 ease-in-out hover:border-gray-300 has-[:checked]:border-brand-500 has-[:checked]:bg-brand-50 has-[:checked]:ring-1 has-[:checked]:ring-brand-500 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-brand-500">
    <input
        type="{{ $type }}"
        name="{{ $name }}"
        value="{{ $value }}"
        @checked($checked)
        {{ $attributes->merge(['class' => 'mt-0.5 border-gray-300 text-brand-600 shadow-sm focus:ring-brand-500 '.($type === 'radio' ? 'rounded-full' : 'rounded')]) }}
    >

    <span class="min-w-0">
        <span class="block text-sm font-semibold text-gray-900">{{ $label }}</span>

        @if ($description)
            <span class="mt-0.5 block text-sm text-gray-600">{{ $description }}</span>
        @endif
    </span>
</label>