@props([
    'name',
    'label' => null,
    'type' => 'text',
    'hint' => 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 py-2 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

    <input
        id="{{ $id }}"
        name="{{ $name }}"
        type="{{ $type }}"
        @if ($hasError) aria-invalid="true" aria-describedby="{{ $id }}-error" @endif
        {{ $attributes->merge(['class' => $field]) }}
    >

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

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