@props(['rotulo', 'id', 'nota' => null, 'tipo' => 'text', 'erro' => null])

{{-- Campo de formulário no desenho do resto do sistema: rótulo, campo com a
     mesma altura e borda das caixas de escolha, e o erro logo abaixo. --}}
<div>
    <label for="{{ $id }}" class="block text-sm font-medium text-tinta">
        {{ $rotulo }}
        @if ($nota)
            <span class="font-normal text-suave">— {{ $nota }}</span>
        @endif
    </label>
    <input id="{{ $id }}" type="{{ $tipo }}" {{ $attributes->class([
        'mt-1 block h-[2.125rem] w-full rounded-md border bg-superficie px-3 text-sm text-tinta shadow-xs',
        'placeholder:text-suave focus-visible:outline-2 focus-visible:outline-offset-0',
        'border-rose-300 focus-visible:outline-rose-500' => $erro,
        'border-fio focus-visible:outline-marca-600' => ! $erro,
    ]) }}>
    @if ($erro)
        <p class="mt-1 text-sm text-rose-700">{{ $erro }}</p>
    @endif
</div>