{{-- 
Radio Button Component
Usage:
<x-ui.inputs.radio name="gender" value="male" label="Male" />
<x-ui.inputs.radio name="gender" value="female" label="Female" />
<x-ui.inputs.radio name="disabled-radio" value="option" label="Disabled option" disabled />
<x-ui.inputs.radio name="with-error" value="option" label="Option with error" error="Please select an option" />
--}}

@props([
    'name',
    'value',
    'label' => null,
    'error' => null,
    'disabled' => false,
])

<div class="flex items-start">
    <div class="flex items-center h-5">
        <input 
            id="{{ $name }}_{{ $value }}"
            name="{{ $name }}"
            type="radio"
            value="{{ $value }}"
            {{ $disabled ? 'disabled' : '' }}
            {{ $attributes->merge([
                'class' => 'h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-800 dark:focus:ring-primary-600 disabled:opacity-50 disabled:cursor-not-allowed' . ($error ? ' border-red-300' : '')
            ]) }}
        />
    </div>
    
    <div class="ml-3 text-sm">
        @if($label)
            <label for="{{ $name }}_{{ $value }}" class="font-medium text-gray-700 dark:text-gray-300 {{ $disabled ? 'opacity-50' : '' }}">
                {{ $label }}
                @if($attributes->has('required'))
                    <span class="text-red-500">*</span>
                @endif
            </label>
        @endif
        
        @if($error)
            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $error }}</p>
        @endif
        
        @if(isset($description))
            <p class="text-gray-500 dark:text-gray-400 {{ $disabled ? 'opacity-50' : '' }}">{{ $description }}</p>
        @endif
    </div>
</div>