@props([
    'name' => 'undefined',
    'label' => 'Undefined',
    'type' => 'text',
    'placeholder' => '',
])

<div class="mb-5">
    <label for="{{ $name }}" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ $label }}</label>
    <input type="{{ $type }}" id="{{ $name }}"
        @class([
            'border text-sm rounded-lg block w-full p-2.5',
            'bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500' => $errors->has($name),
            'bg-gray-50 border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500' => !$errors->has($name),
        ])
        placeholder="{{ $placeholder }}" {{ $attributes }} />
        @error($name)
            <p class="mt-2 text-sm text-red-600 dark:text-red-500"><span class="font-medium">Oops!</span> {{ $message }}</p>
        @enderror
</div>