@props([
    'label',
    'name',
    'type' => 'text',
    'value' => '',
    'required' => false,
    'readonly' => false,
    'placeholder' => '',
    'options' => [],
    'rows' => 3,
    'fullWidth' => false,
    'mode' => 'edit'
])

@php
    $isReadOnly = $readonly || ($mode === 'view') || (auth()->user()->role === 'expectant_mother');
    $fieldId = 'field_' . str_replace(['[', ']', '.'], ['_', '_', '_'], $name);
@endphp

<div class="form-group {{ $fullWidth ? 'form-grid-full' : '' }}">
    <label for="{{ $fieldId }}" class="tc-field-label {{ $required ? 'required' : '' }}">
        {{ $label }}
        @if($required)
            <span class="text-red-500">*</span>
        @endif
    </label>
    
    @if($isReadOnly)
        <!-- Read-only display -->
        <div class="tc-input bg-gray-50 text-gray-900 cursor-not-allowed">
            @if($type === 'radio' || $type === 'checkbox')
                {{ $value ?? '—' }}
            @elseif($type === 'textarea')
                {{ $value ?? '—' }}
            @else
                {{ $value ?? '—' }}
            @endif
        </div>
    @else
        <!-- Editable inputs -->
        @if($type === 'select')
            <select
                id="{{ $fieldId }}"
                name="{{ $name }}"
                class="tc-select"
                {{ $required ? 'required' : '' }}
            >
                <option value="">{{ $placeholder ?: 'Select an option' }}</option>
                @foreach($options as $optionValue => $optionLabel)
                    <option value="{{ $optionValue }}" {{ $value == $optionValue ? 'selected' : '' }}>
                        {{ $optionLabel }}
                    </option>
                @endforeach
            </select>
        @elseif($type === 'textarea')
            <textarea
                id="{{ $fieldId }}"
                name="{{ $name }}"
                rows="{{ $rows }}"
                class="tc-textarea"
                placeholder="{{ $placeholder }}"
                {{ $required ? 'required' : '' }}
            >{{ $value }}</textarea>
        @elseif($type === 'radio')
            <div class="tc-radio-group">
                @foreach($options as $optionValue => $optionLabel)
                    <label class="tc-radio-item">
                        <input
                            type="radio"
                            name="{{ $name }}"
                            value="{{ $optionValue }}"
                            {{ $value == $optionValue ? 'checked' : '' }}
                            {{ $required ? 'required' : '' }}
                        >
                        <span class="text-sm text-gray-700">{{ $optionLabel }}</span>
                    </label>
                @endforeach
            </div>
        @elseif($type === 'checkbox')
            <label class="tc-checkbox-item">
                <input
                    type="checkbox"
                    name="{{ $name }}"
                    value="1"
                    {{ $value ? 'checked' : '' }}
                    {{ $required ? 'required' : '' }}
                >
                <span class="text-sm text-gray-700">{{ $placeholder ?: $label }}</span>
            </label>
        @else
            <input
                type="{{ $type }}"
                id="{{ $fieldId }}"
                name="{{ $name }}"
                value="{{ $value }}"
                class="tc-input"
                placeholder="{{ $placeholder }}"
                {{ $required ? 'required' : '' }}
            >
        @endif
    @endif
    
    @error($name)
        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
    @enderror
</div>