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

<div class="mb-4">
    <label class="block font-medium text-sm mb-2" for="{{ $id }}">
        {{ $label }} {!! $required ? '<span class="text-red-600">*</span>' : '' !!}
    </label>

    <input class='text-sm block mt-1 w-full p-2 bg-gray-50 border border-gray-300 focus:ring-gray-500 focus:border-gray-500 rounded-md shadow-sm placeholder-gray-300' type="{{ $type }}"
        value="{{ $value }}" name="{{ $name }}" id="{{ $id }}"
        {{ $disabled ? 'disabled' : '' }} placeholder="{{ $placeholder }}"/>

    @error($name)
        <small class="text-sm text-primary-red space-y-1">
            {{ $message }}
        </small>
    @enderror
</div>