@props([
    'id',
    'name',
    'type' => 'text',
    'value' => '',
    'required' => false,
    'autocomplete' => '',
    'placeholder' => '',
    'mask' => '',
    'icon' => '',
    'disabled' => false,
])

@php
    $hasIcon = !empty($icon);
    $isPassword = $type === 'password';
    
    // Map FontAwesome icon names to Unicons
    $iconMap = [
        'fa-envelope' => 'uil-envelope',
        'fa-user' => 'uil-user',
        'fa-key' => 'uil-key-skeleton',
        'fa-phone' => 'uil-phone',
        'envelope' => 'uil-envelope',
        'user' => 'uil-user',
        'key' => 'uil-key-skeleton',
        'phone' => 'uil-phone',
    ];
    $iconClass = $iconMap[$icon] ?? $icon;
    if ($hasIcon && !str_starts_with($iconClass, 'uil-') && !str_starts_with($iconClass, 'uil ')) {
        $iconClass = 'uil-' . $iconClass;
    }
@endphp

<div class="relative w-full" x-data="{ show: false }">
    <input
        {{ $attributes->merge([
            'class' => 'w-full py-2.5 rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 dark:placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 transition duration-150 ease-in-out cursor-text'
                . ($hasIcon ? ' pl-10' : ' pl-4')
                . ($isPassword ? ' pr-10' : ' pr-4'),
            'id' => $id,
            'type' => $isPassword ? 'password' : $type,
            'name' => $name,
            'value' => $value,
            'required' => $required,
            'autocomplete' => $autocomplete,
            'placeholder' => $placeholder,
            'disabled' => $disabled,
        ]) }}
        x-ref="input"
        @if ($mask) x-init="Inputmask({ 'mask': '{{ $mask }}' }).mask($refs.input);" @endif
        @if ($isPassword) :type="show ? 'text' : 'password'" @endif
    >
    
    @if ($hasIcon)
        <span class="absolute left-3 top-1/2 -translate-y-1/2 uil {{ $iconClass }} text-zinc-400 dark:text-zinc-500 text-lg pointer-events-none"></span>
    @endif

    @if ($isPassword)
        {{-- Eye toggle: right-3 = 12px from edge, matching the left icon's left-3 position for visual symmetry --}}
        <button type="button"
            class="absolute right-0 top-0 h-full w-10 flex items-center justify-center text-zinc-400 dark:text-zinc-500 hover:text-emerald-600 dark:hover:text-emerald-400 transition cursor-pointer select-none focus:outline-none focus:ring-0"
            @click="show = !show"
            tabindex="-1"
            title="Toggle Password Visibility"
            aria-label="Toggle Password Visibility"
        >
            <span :class="show ? 'uil uil-eye-slash' : 'uil uil-eye'" class="text-base pointer-events-none"></span>
        </button>
    @endif
</div>