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

@php
    $palette = [
        'primary' => 'input-primary',
    ][$variant] ?? '';
    $icon_class = $icon ? '!pl-12' : '';

@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
        <input type="{{ $type }}" id="{{ $name }}" name="{{ $name }}" autocomplete="{{ $autocomplete }}"
            @if ($autofocus) autofocus @endif
            @if ($disabled) disabled @endif
            placeholder="{{ $placeholder }}"
            class="form-input {{ $icon_class }}"
            value="{{ old($name, $value) }}" />
    </div>
    @error($name)
    <span class="error-text">{{ $message }}</span>
    @enderror
</div>