@props(['label' => null, 'hint' => null, 'error' => null, 'required' => false, 'prefix' => null, 'suffix' => null])

@php $id = $attributes->get('id') ?? 'f_'.\Illuminate\Support\Str::random(6); @endphp

<div>
    @if ($label)
        <label for="{{ $id }}" class="field-label">
            {{ $label }}
            @if ($required) <span class="text-red-500">*</span> @endif
        </label>
    @endif

    <div class="relative">
        @if ($prefix)
            <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-sm text-slate-400">{{ $prefix }}</span>
        @endif

        <input
            id="{{ $id }}"
            {{ $attributes->merge([
                'class' => 'field-input'.($prefix ? ' pl-9' : '').($suffix ? ' pr-12' : ''),
                'type' => 'text',
            ]) }}
        >

        @if ($suffix)
            <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-sm text-slate-400">{{ $suffix }}</span>
        @endif
    </div>

    @if ($error)
        <p class="field-error">{{ $error }}</p>
    @elseif ($hint)
        <p class="field-hint">{{ $hint }}</p>
    @endif
</div>