@props([
    'name',
    'label' => null,
    'type' => 'text',
    'hint' => null,
    // Die Einheit, im Feld statt in der Beschriftung: „Gebühr 2. Mahnung (Cent)"
    // erklärt die Einheit an einer Stelle, die man beim schnellen Ändern nicht
    // mehr liest. Ein € am rechten Rand des Feldes steht dort, wo der Blick
    // ohnehin hinfällt — und lässt die Beschriftung wieder das benennen, worum
    // es geht.
    'suffix' => null,
])
@php
    // $errors is shared on web requests; default it so the component also renders
    // standalone (e.g. in isolated Blade::render tests).
    $errors ??= new \Illuminate\Support\ViewErrorBag;
    $id = $attributes->get('id', $name);
    $hasError = $errors->has($name);
    $field = 'block w-full rounded border bg-surface px-3.5 py-2.5 text-sm text-ink placeholder:text-faint transition '
        .($hasError ? 'border-danger bg-danger-bg' : 'border-line');
@endphp
<div class="space-y-1.5">
    @if ($label)
        <label for="{{ $id }}" class="block text-sm font-medium text-body">{{ $label }}</label>
    @endif

    @if ($suffix)
        <div class="relative">
            <input
                id="{{ $id }}"
                name="{{ $name }}"
                type="{{ $type }}"
                @if ($hasError) aria-invalid="true" aria-describedby="{{ $id }}-error" @endif
                {{ $attributes->merge(['class' => $field.' pr-12']) }}
            >
            {{-- aria-hidden: die Einheit gehört für einen Screenreader in die
                 Beschriftung, nicht als loses Wort hinter das Feld. --}}
            <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3.5 text-sm text-muted"
                  aria-hidden="true">{{ $suffix }}</span>
        </div>
    @else
        <input
            id="{{ $id }}"
            name="{{ $name }}"
            type="{{ $type }}"
            @if ($hasError) aria-invalid="true" aria-describedby="{{ $id }}-error" @endif
            {{ $attributes->merge(['class' => $field]) }}
        >
    @endif

    @if ($hint && ! $hasError)
        <p class="text-xs text-muted">{{ $hint }}</p>
    @endif

    @error($name)
        <p id="{{ $id }}-error" class="text-xs text-danger">{{ $message }}</p>
    @enderror
</div>