@props([
    'hasLabel' => true,
    'labelText' => '',
    'name' => '',
    'type' => 'text',
    'placeholder' => '',
    'isRequired' => true,
    'width' => 12,
    'isReadonly' => false,
    'value' => ''
])

@if($hasLabel)
    <label for="input-{{$name}}" class="block mb-0.5 text-par-s font-medium text-lab-pr2">
        {{ $labelText }}
    </label>
@endif
@if(isset($feedbackText))
    <x-forms.valinfo classes="mb-2">
        {{ $feedbackText }}
    </x-forms.valinfo>
@endif

<div class="flex">
    <div class="w-{{ $width }}/12 min-40">
        <input @if($isReadonly) readonly="true" @endif @if($isRequired) required @endif class="ring-none bg-fill-tr text-lab-pr text-par-s rounded-lg outline-none hover:ring-1 focus:ring-1 focus:ring-brand-900 block w-full h-10 px-4 placeholder:text-lab-sc placeholder:text-par-s" id="input-{{ $name }}" type="{{ $type }}" name="{{ $name }}" placeholder="{{ $placeholder }}" value="{{ $errors->any() ? old($name) : $value }}" {{ $attributes }} autocomplete="off">
    </div>
</div>

@error($name)
    <x-forms.valerr>
        {{ $message }}
    </x-forms.valerr>
@enderror