@props([
    'id' => null,
    'name' => null,
    'type' => 'text',
    'value' => null,
    'placeholder' => '',
    'required' => false,
    'disabled' => false,
    'class' => '',
    'iconRight' => null,
    'onIconClick' => null,
])

@php
    $finalValue = $value ?? old($name, request($name));
@endphp

<div class="relative w-full">
    {{-- Campo de texto --}}
    <input 
        id="{{ $id ?? $name }}"
        name="{{ $name }}"
        type="{{ $type }}"
        value="{{ $finalValue }}"
        placeholder="{{ $placeholder }}"
        @if($required) required @endif
        @if($disabled) disabled @endif
        {{ $attributes->merge([
            'class' => "w-full border border-gray-300 rounded-lg p-2 pr-10 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition  text-sm text-gray-700 $class"
        ]) }}
    />

    {{-- Icono derecho --}}
    @if ($iconRight)
        <button 
            type="button"
            class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-blue-600 transition"
            @if($onIconClick) onclick="{{ $onIconClick }}" @endif
        >
            <x-dynamic-component :component="'lucide-' . $iconRight" class="w-5 h-5" />
        </button>
    @endif
</div>

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