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

<div>
    <label for="{{ $name }}" class="mb-1.5 block text-base font-medium text-slate-700">
        {{ $label }}
        @if ($required)
            <span class="text-error-500">*</span>
        @endif
    </label>

    <input
        id="{{ $name }}"
        name="{{ $name }}"
        type="{{ $type }}"
        value="{{ old($name, $value) }}"
        @if ($placeholder) placeholder="{{ $placeholder }}" @endif
        @if ($autocomplete) autocomplete="{{ $autocomplete }}" @endif
        @if ($required) required @endif
        @if ($autofocus) autofocus @endif
        {{ $attributes->merge([
            'class' => 'h-12 w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-base text-slate-900 shadow-theme-xs placeholder:text-slate-400 focus:border-brand-300 focus:outline-none focus:ring-4 focus:ring-brand-500/10',
        ]) }}
    />

    @if ($hint)
        <p class="mt-2 text-sm text-slate-500">{{ $hint }}</p>
    @endif

    <x-input-error :messages="$errors->get($name)" class="mt-2 text-sm text-error-600" />
</div>