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

<div class="login-stagger">
    <label for="{{ $name }}" class="auth-text-label mb-1.5 block text-[13px] font-medium">{{ $label }}</label>
    <div class="input-wrap flex items-center rounded-xl">
        <input
            id="{{ $name }}"
            type="{{ $type }}"
            name="{{ $name }}"
            value="{{ old($name, $value) }}"
            @if ($placeholder) placeholder="{{ $placeholder }}" @endif
            @if ($required) required @endif
            @if ($autocomplete) autocomplete="{{ $autocomplete }}" @endif
            {{ $attributes->merge(['class' => 'login-input w-full bg-transparent px-4 py-3 text-[14px] outline-none']) }}
        >
    </div>
    @error($name)
        <p class="mt-1.5 text-[13px] text-red-500 dark:text-red-400">{{ $message }}</p>
    @enderror
</div>