@props([
    'inputForm'=>NULL,

    'color'=>false,
    'type'=>null,
    'title'=>false,
    'name'=>NULL,
    'required'=>false,
])
@php
    $inputColor = [
        'success' => 'bg-[#01B81A]/5 text-[#9A1884] border-none focus:border-[#01B81A] focus:ring-[#01B81A]',
        'danger' => 'bg-[#FF4D4F]/5 text-[#9A1884] border-none focus:border-[#F75C5D] focus:ring-[#F75C5D]',
        'warning' => 'bg-[#FA8B0C]/5 text-[#9A1884] border-none focus:border-[#FA8B0C] focus:ring-[#FA8B0C]',
        'default' => 'bg-[#9A1884]/5 text-[#9A1884] border-none focus:border-[#D70CB5] focus:ring-[#D70CB5]',
    ];

    $inputForm = $inputForm ?? 'input';
    $inputTitle = $title;
    $inputColor = $inputColor[$color] ?? $inputColor['default'];
    $inputName = $name ?? $inputTitle;
    $inputId = str_replace(' ','_',strtolower($inputName));
    $inputType = $title ?? 'text';
    $required;

@endphp
    
    <div class="mt-2">
@if($inputTitle)
            <label for="{{ $inputId }}" class="block font-medium text-sm text-gray-700">{{ $inputTitle }}</label>
@endif
@if($inputForm == "input")
            <input type="{{ $type }}" name="{{ $inputName }}" id="{{ $inputId }}" {{ $attributes->merge(['class' => "$inputColor block w-full rounded shadow-sm mt-1"]) }} {{ $required ? 'required' : '' }}>
@elseif($inputForm == "select")
            <select name="{{ $inputName }}" id="{{ $inputId }}" {{ $attributes->merge(['class' => "$inputColor block w-full rounded shadow-sm mt-1"]) }} {{ $required ? 'required' : '' }}>
                <option value="" selected disabled>-- --</option>
                {{ $slot }}
            </select>
@endif
        </div>