@props([
    'name',
    'label'       => '',
    'type'        => 'text',
    'value'       => '',
    'required'    => false,
    'readonly'    => false,
    'placeholder' => '',
])

<div>
    @if($label)
        <label for="{{ $name }}" class="form-label">
            {{ $label }}
            @if($required)
                <span class="text-red-500">*</span>
            @endif
        </label>
    @endif

    <input
        type="{{ $type }}"
        id="{{ $name }}"
        name="{{ $name }}"
        value="{{ old($name, $value) }}"
        placeholder="{{ $placeholder }}"
        {{ $required ? 'required' : '' }}
        {{ $readonly ? 'readonly' : '' }}
        {{ $attributes->merge(['class' => 'form-input' . ($errors->has($name) ? ' form-input-error' : '') . ($readonly ? ' bg-surface-50 cursor-not-allowed text-surface-500' : '')]) }}
    />

    @error($name)
        <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
    @enderror
</div>