@props([
    'label',
    'name',
    'type' => 'text',
    'hint' => null,
    'required' => false,
])

@php
    $inputId = $attributes->get('id', $name);
    $hasError = $errors->has($name);
@endphp

<label class="vpm-field" for="{{ $inputId }}">
    <span class="vpm-field__label">
        {{ $label }}
        @if ($required)
            <span class="vpm-required" aria-hidden="true">*</span>
            <span class="sr-only">(required)</span>
        @endif
    </span>

    @if ($type === 'textarea')
        <textarea
            id="{{ $inputId }}"
            name="{{ $name }}"
            {{ $attributes->merge(['class' => 'vpm-input' . ($hasError ? ' vpm-input--error' : '')]) }}
            @if ($required) required @endif
        >{{ $attributes->get('value', old($name)) }}</textarea>
    @else
        <input
            id="{{ $inputId }}"
            type="{{ $type }}"
            name="{{ $name }}"
            value="{{ $attributes->get('value', old($name)) }}"
            {{ $attributes->merge(['class' => 'vpm-input' . ($hasError ? ' vpm-input--error' : '')]) }}
            @if ($required) required @endif
        />
    @endif

    @if ($hint)
        <span class="vpm-field__hint">{{ $hint }}</span>
    @endif

    @error($name)
        <span class="vpm-field__error vpm-field-error" id="{{ $inputId }}-error" role="alert">{{ $message }}</span>
    @enderror
</label>