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

@php
    $id = $attributes->get('id') ?? $name ?? 'f-'.uniqid();
    $error ??= $name ? ($errors->first($name) ?: null) : null;
    $describedBy = collect([$hint ? $id.'-hint' : null, $error ? $id.'-error' : null])->filter()->implode(' ');
@endphp

<div class="w-full">
    @if ($label)
        <label for="{{ $id }}" class="mb-1.5 block text-sm font-medium text-slate-800">
            {{ $label }}
            @if ($required)<span class="text-red-600" aria-hidden="true">*</span>@endif
        </label>
    @endif

    <input
        type="{{ $type }}"
        id="{{ $id }}"
        @if ($name) name="{{ $name }}" @endif
        @if ($required) required aria-required="true" @endif
        @if ($describedBy) aria-describedby="{{ $describedBy }}" @endif
        @if ($error) aria-invalid="true" @endif
        {{ $attributes->class([
            'block w-full rounded-lg border px-3.5 py-2.5 text-sm text-slate-900 shadow-sm transition
             placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-offset-0',
            'border-slate-300 focus:border-brand-700 focus:ring-brand-700/30' => ! $error,
            'border-red-400 focus:border-red-500 focus:ring-red-500/30' => $error,
        ]) }}
    />

    @if ($hint && ! $error)
        <p id="{{ $id }}-hint" class="mt-1.5 text-xs text-slate-500">{{ $hint }}</p>
    @endif

    @if ($error)
        <p id="{{ $id }}-error" class="mt-1.5 flex items-start gap-1 text-xs text-red-600">
            <svg class="mt-0.5 h-3.5 w-3.5 shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                <path fill-rule="evenodd" d="M18 10A8 8 0 1 1 2 10a8 8 0 0 1 16 0Zm-7 4a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1-9a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1Z" clip-rule="evenodd" />
            </svg>
            <span>{{ $error }}</span>
        </p>
    @endif
</div>
