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

@php
    $value = $value ?? old($name);
    $id = $id ?? $name;
    $error = $errors->first($name);

    $inputClass = 'w-full rounded-xl border bg-white px-3 py-2.5 text-sm shadow-sm outline-none transition placeholder:text-slate-400 focus:ring-4';
    $inputClass .= $error
        ? ' border-rose-300 focus:border-rose-400 focus:ring-rose-200'
        : ' border-slate-200 focus:border-brand-400 focus:ring-brand-200';

    if ($disabled) {
        $inputClass .= ' cursor-not-allowed bg-slate-50 text-slate-500';
    }
@endphp

<div class="{{ $wrapClass }}">
    @if($label)
        <label class="mb-1 block text-sm font-semibold text-slate-700" for="{{ $id }}">
            {{ $label }}
            @if($required)
                <span class="text-rose-500">*</span>
            @endif
        </label>
    @endif

    <input
        id="{{ $id }}"
        name="{{ $name }}"
        type="{{ $type }}"
        value="{{ $value }}"
        placeholder="{{ $placeholder }}"
        @if($required) required @endif
        @if($disabled) disabled @endif
        {{ $attributes->merge(['class' => $inputClass]) }}
    >

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

    @if($error)
        <div class="mt-1 text-xs font-medium text-rose-600">{{ $error }}</div>
    @endif
</div>