@props([
    'disabled' => false,
    'label' => false,
    'name',
    'options' => [], // For select inputs: ['value' => 'Label']
    'placeholder' => '',
    'required' => false,
    'rows' => 3, // For textarea
    'type' => 'text',
    'value' => '',
])

@php
    $baseClasses = 'w-full rounded-md border border-gray-300 text-slate-900 placeholder-gray-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 py-3 px-4 disabled:bg-gray-50 disabled:text-gray-400';
    $errorClasses = 'border-red-500 focus:border-red-500 focus:ring-red-500';
@endphp

<div class="{{ $attributes->get('class') }}">
    @if($label)
        <label for="{{ $name }}" class="block text-sm font-medium text-slate-700 mb-2">
            {{ $label }} @if($required) <span class="text-red-500">*</span> @endif
        </label>
    @endif

    @if($type === 'select')
        <select 
            name="{{ $name }}" 
            id="{{ $name }}" 
            class="{{ $baseClasses }} @error($name) {{ $errorClasses }} @enderror"
            {{ $disabled ? 'disabled' : '' }}
            {{ $required ? 'required' : '' }}
        >
            <option value="" disabled {{ empty($value) ? 'selected' : '' }}>{{ $placeholder ?: 'Select an option' }}</option>
            @foreach($options as $optValue => $optLabel)
                <option value="{{ $optValue }}" {{ (string)$value === (string)$optValue ? 'selected' : '' }}>
                    {{ $optLabel }}
                </option>
            @endforeach
        </select>

    @elseif($type === 'textarea')
        <textarea 
            name="{{ $name }}" 
            id="{{ $name }}" 
            rows="{{ $rows }}" 
            class="{{ $baseClasses }} @error($name) {{ $errorClasses }} @enderror"
            placeholder="{{ $placeholder }}"
            {{ $disabled ? 'disabled' : '' }}
            {{ $required ? 'required' : '' }}
        >{{ $value }}</textarea>

    @elseif($type === 'password')
        <div x-data="{ show: false }" class="relative">
            <input 
                :type="show ? 'text' : 'password'"
                name="{{ $name }}" 
                id="{{ $name }}" 
                value="{{ $value }}"
                class="{{ $baseClasses }} pr-10 @error($name) {{ $errorClasses }} @enderror"
                placeholder="{{ $placeholder }}"
                {{ $disabled ? 'disabled' : '' }}
                {{ $required ? 'required' : '' }}
            >
            <button 
                type="button" 
                @click="show = !show" 
                class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-gray-600 focus:outline-none"
            >
                <!-- Eye Open -->
                <svg x-show="!show" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
                <!-- Eye Closed -->
                <svg x-show="show" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="display: none;">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
                </svg>
            </button>
        </div>

    @else
        <div class="relative">
             @if($type === 'email')
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
                    </svg>
                </div>
            @endif
            
            <input 
                type="{{ $type }}" 
                name="{{ $name }}" 
                id="{{ $name }}" 
                value="{{ $value }}"
                class="{{ $baseClasses }} {{ $type === 'email' ? 'pl-10' : '' }} @error($name) {{ $errorClasses }} @enderror"
                placeholder="{{ $placeholder }}"
                {{ $disabled ? 'disabled' : '' }}
                {{ $required ? 'required' : '' }}
            >
        </div>
    @endif

    @error($name)
        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
    @enderror
</div>