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

@php
    /*
     | Wraps label + control + error into one unit so no form can accidentally
     | ship an input without its error message wired up. Errors are read from
     | the bag by field name rather than passed in, which is what keeps
     | validation feedback consistent across every form in the product.
     */
    $id = $attributes->get('id', $name);
    $hasError = $name && $errors->has($name);
    $describedBy = collect([
        $hint ? "{$id}-hint" : null,
        $hasError ? "{$id}-error" : null,
    ])->filter()->implode(' ');
@endphp

<div class="space-y-1.5">
    @if ($label)
        <label for="{{ $id }}" class="block text-sm font-medium text-silver-200">
            {{ $label }}
            @if ($required)
                <span class="text-danger" aria-hidden="true">*</span>
            @endif
        </label>
    @endif

    <input
        type="{{ $type }}"
        id="{{ $id }}"
        name="{{ $name }}"
        value="{{ old($name, $value) }}"
        @if ($required) required @endif
        @if ($autocomplete) autocomplete="{{ $autocomplete }}" @endif
        @if ($describedBy) aria-describedby="{{ $describedBy }}" @endif
        @if ($hasError) aria-invalid="true" @endif
        {{ $attributes->merge([
            'class' => 'block w-full rounded-lg bg-abyss px-3.5 py-2.5 text-sm text-silver-100 '
                .'placeholder:text-silver-500 border transition-colors duration-150 '
                .'focus:outline-none focus:ring-2 focus:ring-electric-500/40 '
                .($hasError
                    ? 'border-danger/60 focus:border-danger'
                    : 'border-line-strong focus:border-electric-500'),
        ]) }}
    >

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

    @if ($hasError)
        <p id="{{ $id }}-error" class="text-xs text-danger">{{ $errors->first($name) }}</p>
    @endif
</div>