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

<div {{ $attributes->whereDoesntStartWith('wire:model')->class(['space-y-1']) }}>
    @if ($label)
        <label for="{{ $name }}" class="block text-sm font-medium text-gray-700">
            {{ $label }}
            @if ($required)
                <span class="text-danger">*</span>
            @endif
        </label>
    @endif

    <input
        id="{{ $name }}"
        name="{{ $name }}"
        type="{{ $type }}"
        placeholder="{{ $placeholder }}"
        value="{{ old($name, $value) }}"
        {{ $required ? 'required' : '' }}
        {{ $disabled ? 'disabled' : '' }}
        {{ $attributes->whereStartsWith('wire:model') }}
        class="block w-full rounded-lg border bg-white px-4 py-2.5 text-sm text-gray-900 placeholder-gray-400 transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-0 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 {{ $error ? 'border-danger focus:ring-danger' : 'border-gray-300 focus:border-brand focus:ring-brand' }}"
    />

    @if ($error)
        <p class="text-sm text-danger">{{ $error }}</p>
    @endif

    @if ($helper && !$error)
        <p class="text-sm text-gray-500">{{ $helper }}</p>
    @endif
</div>
