@props(['label', 'description', 'error', 'disabled' => false])

@php
    $hasError = isset($error) && strlen($error) > 1;
    $defaultClass =
        'Input-Text w-full bg-gray-100 border rounded px-3 py-1 my-1 text-black border-gray-300 focus:outline-primary-100-100 focus:bg-white focus:text-black ' .
        ($hasError
            ? 'border-red-300/80 text-red-500/80 focus:ring-red-300'
            : ' ');
@endphp

<x-stack
    class="w-full"
    x-data="{ focus: false }"
>
    @isset($label)
        <label
            class="font-semibold"
            x-bind:class="focus ? 'text-primary' : 'text-black/70'"
            for="{{ $attributes->get('id') }}"
        >
            {{ $label }}

            @if ($attributes->get('required'))
                <span class="text-danger-300">*</span>
            @endif

        </label>
    @endisset

    @isset($description)
        <span class="text-xs text-black/50">{{ $description }}</span>
    @endisset

    <span
        class="relative w-full"
        x-data="{ show: false }"
    >
        <input
            {{ $attributes->twMerge($defaultClass)->merge([
                'type' => 'password',
                'autocomplete' => 'one-time-code',
            ]) }}
            x-on:focus="focus = true"
            x-on:blur="focus = false"
            x-bind:type="show ? 'text' : 'password'"
        />

        <button
            class="absolute inset-y-0 -right-2 flex items-center mx-3 text-xl w-fit my-3 px-2 rounded-full hover:bg-slate-300 {{ $disabled ? 'text-gray-100/80' : 'text-primary/90' }} {{ $hasError ? 'text-danger-300/80' : '' }}"
            x-on:click="show = !show"
            type="button"
        >
            <i
                x-show="!show"
                class="ph ph-eye-closed"
            ></i>
            <i
                x-show="show"
                class="ph ph-eye"
            ></i>
        </button>
    </span>

    @if ($hasError)
        <span class="text-xs text-danger-300/80 my-1">{{ $error }}</span>
    @endif

</x-stack>