@props(['label', 'type' => 'text'])

<div class="mb-4" x-data="{ visible: false }">
    @if($label)
        <label for="{{ $attributes->get('id') ?? $attributes->wire('model')->value() ?? '' }}" 
               class="block text-sm font-medium text-gray-700">
            {{ $label }}
        </label>
    @endif

    <div class="relative">
        <input
            @if($type === 'password')
                :type="visible ? 'text' : 'password'"
            @else
                type="{{ $type }}"
            @endif
            {{ $attributes->merge([
                'class' => 'mt-1 px-4 py-2 text-sm block w-full rounded-md border border-gray-300 shadow-sm
                            focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50
                            ' . ($errors->has($attributes->wire('model')->value()) ? 'border-red-500' : '')
            ]) }}
        />

        @if($type == 'file')
            <div wire:loading wire:target="{{ $attributes->wire('model')->value() }}" class="text-green-500">Uploading...</div>
        @endif

        @if ($type === 'password')
            <button 
                type="button"
                @click="visible = !visible"
                class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-500 hover:text-gray-700 focus:outline-none"
                tabindex="-1"
                aria-label="Toggle password visibility"
            >
                <template x-if="!visible">
                    <svg xmlns="http://www.w3.org/2000/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="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.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                    </svg>
                </template>
                <template x-if="visible">
                    <svg xmlns="http://www.w3.org/2000/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="M13.875 18.825A10.05 10.05 0 0112 19c-4.477 0-8.268-2.943-9.542-7a10.056 10.056 0 012.223-3.425m1.49-1.49A9.978 9.978 0 0112 5c4.477 0 8.268 2.943 9.542 7a9.978 9.978 0 01-4.107 5.503M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M3 3l18 18" />
                    </svg>
                </template>
            </button>
        @endif
    </div>

    @if($attributes->get('help_text'))
        <p class="mt-1 text-sm text-gray-500">{{ $attributes->get('help_text') }}</p>
    @endif

    @error($attributes->wire('model')->value())
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
</div>