@props([
    'name' => '',
    'id' => '',
    'value' => '',
    'autofocus' => false,
    'disabled' => false,
    'placeholder' => '',
    'variant' => 'primary',
    'autocomplete' => 'on',
    'icon' => null,
])

@php
    $palette = [
        'primary' => 'input-primary',
    ][$variant] ?? '';
    $icon_class = $icon ? '!pl-12' : '';
    $content = old($name, $value);
@endphp
<div {{ $attributes->merge(['class' => "$palette"]) }}>
    <div class="relative">
        @if ($icon)
            <div class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-500 pointer-events-none z-10">
                <x-dynamic-component :component="'icons.' . $icon" class="w-5 h-5" />
            </div>
        @endif
        <textarea class="w-full text-parrafo rounded-md p-2 border border-complement100 resize-none" rows="5" name="{{ $name }}" placeholder="{{ $placeholder }}" @if ($autofocus) autofocus @endif
            @if ($disabled) disabled @endif>{{ $content }}</textarea>
    </div>
    @error($name)
        <span class="error-text">{{ $message }}</span>
    @enderror
</div>