@props([
    'name' => 'rsvp',
    'label' => '',
    'selected' => null
])

<div {{ $attributes->merge(['class' => 'flex flex-col mb-4']) }}>
    <label class="font-main text-size-small-heading leading-normal text-complement300 mb-2">{{ $label }}</label>
    <div class="flex items-center space-x-4">
        <label class="inline-flex items-center cursor-pointer">
            <input
                type="radio"
                name="{{ $name }}"
                value="yes"
                @checked($selected === 'yes')
                class="peer hidden"
            >
            <span class="w-5 h-5 mr-2 inline-block rounded-full border-2 border-complement700 peer-checked:bg-complement700 peer-checked:ring-4 peer-checked:ring-complement100 transition duration-200"></span>
            <span class="text-gray parrafo text-size-small-heading font-main">Sí</span>
        </label>

        <label class="inline-flex items-center cursor-pointer">
            <input
                type="radio"
                name="{{ $name }}"
                value="no"
                @checked($selected === 'no')
                class="peer hidden"
            >
            <span class="w-5 h-5 mr-2 inline-block rounded-full border-2 border-complement700 peer-checked:bg-complement700 peer-checked:ring-4 peer-checked:ring-complement100 transition duration-200"></span>
            <span class="text-gray parrafo text-size-small-heading font-main">No</span>
        </label>
    </div>
</div>