@props([
    'type' => 'text',
    'label' => null,
    'error' => null,
    'hint' => null,
    'icon' => null,
    'iconPosition' => 'left'
])

<div class="space-y-1.5">
    @if($label)
        <label class="block text-sm font-medium text-slate-700 dark:text-slate-300">
            {{ $label }}
        </label>
    @endif
    
    <div class="relative">
        @if($icon && $iconPosition === 'left')
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <i data-lucide="{{ $icon }}" class="w-5 h-5 text-slate-400"></i>
            </div>
        @endif
        
        <input 
            type="{{ $type }}"
            {{ $attributes->merge([
                'class' => 'w-full px-4 py-2.5 bg-white dark:bg-slate-800 border rounded-xl text-slate-800 dark:text-white placeholder-slate-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-colors ' .
                           ($error ? 'border-red-500 focus:ring-red-500' : 'border-slate-200 dark:border-slate-700') .
                           ($icon && $iconPosition === 'left' ? ' pl-10' : '') .
                           ($icon && $iconPosition === 'right' ? ' pr-10' : '')
            ]) }}
        >
        
        @if($icon && $iconPosition === 'right')
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                <i data-lucide="{{ $icon }}" class="w-5 h-5 text-slate-400"></i>
            </div>
        @endif
    </div>
    
    @if($error)
        <p class="text-sm text-red-500">{{ $error }}</p>
    @elseif($hint)
        <p class="text-sm text-slate-500 dark:text-slate-400">{{ $hint }}</p>
    @endif
</div>