{{--
    Radio Button Component
    Props:
      $name, $label, $value, $checked, $hint, $disabled
--}}
@props([
    'name'     => '',
    'label'    => '',
    'value'    => '',
    'checked'  => false,
    'hint'     => '',
    'disabled' => false,
])

<div class="flex items-start gap-3">
    <div class="flex h-5 items-center mt-0.5">
        <input
            type="radio"
            id="{{ $name }}_{{ $value }}"
            name="{{ $name }}"
            value="{{ $value }}"
            {{ old($name, $checked ? $value : null) == $value ? 'checked' : '' }}
            {{ $disabled ? 'disabled' : '' }}
            {{ $attributes->merge([
                'class' => 'h-4 w-4 border-surface-300 text-primary-600 cursor-pointer
                            focus:ring-2 focus:ring-primary-500 focus:ring-offset-0
                            dark:border-surface-600 dark:bg-surface-800 disabled:opacity-60'
            ]) }}
        />
    </div>
    <div>
        @if($label)
            <label for="{{ $name }}_{{ $value }}"
                   class="text-sm font-medium text-surface-700 dark:text-surface-300 cursor-pointer {{ $disabled ? 'opacity-60' : '' }}">
                {{ $label }}
            </label>
        @endif
        @if($hint)
            <p class="mt-1.5 text-xs text-muted-foreground">{{ $hint }}</p>
        @endif
    </div>
</div>