@props(['label' => null, 'icon' => 'lock'])

<div>
    @if($label)
        <x-label :for="$attributes['id']" :value="$label" />
    @endif

    <div class="relative group" x-data="{ show: false }">
        @if($icon)
            <div
                class="absolute inset-y-0 left-0 w-10 flex items-center justify-center pointer-events-none text-text-muted group-focus-within:text-primary transition-colors">
                <i data-lucide="{{ $icon }}" class="w-4 h-4"></i>
            </div>
        @endif

        <input :type="show ? 'text' : 'password'" {{ $attributes->merge(['class' => 'form-input ' . ($icon ? 'pl-9! text-sm font-medium transition-all placeholder:text-text-muted/40' : '') . ' pr-10']) }}>

        <button type="button" @click="show = !show"
            class="absolute inset-y-0 right-0 w-10 flex items-center justify-center text-text-muted hover:text-primary transition-colors focus:outline-none cursor-pointer">
            <i :data-lucide="show ? 'eye-off' : 'eye'" class="w-4 h-4 transition-all"></i>
        </button>
    </div>
</div>