@props([
    'label' => null,
    'name',
    'type' => 'text',
    'value' => null,
    'placeholder' => null,
    'help' => null,
    'field' => null,
])

@php($fieldName = $field ?? $name)

<div>
    @if ($label)
        <label for="{{ $name }}" class="mb-1.5 block text-sm font-bold text-slate-700">
            {{ $label }}
        </label>
    @endif

    <input
        id="{{ $name }}"
        name="{{ $name }}"
        type="{{ $type }}"
        value="{{ old($fieldName, $value) }}"
        placeholder="{{ $placeholder }}"
        {{ $attributes->merge(['class' => 'h-11 w-full rounded-lg border border-booklio-border bg-white px-3.5 text-sm font-medium text-booklio-dark shadow-soft outline-none transition placeholder:text-slate-400 focus:border-booklio-primary focus:ring-4 focus:ring-blue-100']) }}
    >

    @error($fieldName)
        <p class="mt-1.5 text-xs font-semibold text-red-600">{{ $message }}</p>
    @elseif($help)
        <p class="mt-1.5 text-xs text-booklio-muted">{{ $help }}</p>
    @enderror
</div>