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

@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 min-h-20' .
        ($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-100' : 'text-black/70'"
            for="{{ $attributes->get('id') }}"
        >
            {{ $label }}

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

        </label>
    @endisset

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

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

        @if ($slot->isNotEmpty())
            <div
                class="absolute inset-y-0 right-0 flex items-center mx-3 text-xl {{ $iconable ? '' : 'pointer-events-none' }} {{ $disabled ? 'text-gray-100/80' : 'text-primary-100/90' }} {{ $hasError ? 'text-red-300/80' : '' }}"
                x-init="icon = true"
            >
                {{ $slot }}
            </div>
        @endif
    </span>

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

</x-stack>