@props([
    'options',
    'name',
    'labelField' => 'name',
    'valueField' => 'id',
    'selected' => null,
    'label' => 'Selecciona una opción',
])
<div {{ $attributes->merge(['class' => 'mb-4']) }}>
    <label class="text-accent text-parrafo mb-2 block">
        {{ $label }}
    </label>

    <div class="flex flex-wrap gap-4">
        @foreach ($options as $option)
            @php
                $optionValue = is_array($option) ? $option[$valueField] : $option->{$valueField};
                $optionLabel = is_array($option) ? $option[$labelField] : $option->{$labelField};
                $isChecked = (string) $selected === (string) $optionValue;
            @endphp

            <label for="{{ $name . '_' . $optionValue }}"
                class="flex items-center space-x-2 cursor-pointer transition-all duration-200
                       p-3 rounded-full hover:bg-indigo-50/50 text-black
                       @if($isChecked) ring-2 ring-primary bg-primary-50/75 font-medium @endif">

                <!-- Input Radio Oculto -->
                <input type="radio"
                       id="{{ $name . '_' . $optionValue }}"
                       name="{{ $name }}"
                       value="{{ $optionValue }}"
                       @checked($isChecked)
                       class="form-radio h-5 w-5 text-black border-gray-300 focus:ring-primary
                              transition duration-150 ease-in-out">

                <!-- Etiqueta de la Opción -->
                <span class="ml-2 text-parrafo">
                    {{ $optionLabel }}
                </span>
            </label>
        @endforeach
    </div>
    @error($name)
        <p class="error-text">{{ $message }}</p>
    @enderror
</div>