@props(['disabled' => false])

<div class="flex w-full">

    @if(isset($prefix))
    <div class="flex items-center justify-center ">
        <div class="p-2 md:p-1 bg-emerald-600">
            @if(isset($prefixIcon))
            <div class="">
                {{$prefixIcon}}
            </div>
            @else
            <div class="">
                {{$prefixText}}
            </div>
            @endif
        </div>
    </div>
    @endif

    <input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => '

    font-semibold
    text-sm
    text-gray-800
    dark:text-gray-200
    bg-gray-100
    dark:bg-gray-900
    border
    border-emerald-600
    dark:border-emerald-600
    {{--focus:border-emerald-500
    dark:focus:border-emerald-600
    --}}
    focus:ring-emerald-500
    dark:focus:ring-emerald-600


    ']) !!}>

    @if(isset($suffix))

    <div class="flex items-center justify-center ">
        <div class="{{-- border-2 --}} bg-emerald-600 {{-- border-emerald-500 --}}">

            @if(isset($suffixIcon))
            <div class="">
                {{$suffixIcon}}
            </div>
            @else
            <div class="">
                {{$suffixText}}
            </div>
            @endif

        </div>
    </div>

    @endif

    {{-- <div class="flex">
        <button type="button" class=" bg-emerald-600" {{ $disabled ? 'disabled' : '' }}>
            @if(isset($suffixIcon))
            <div class="">
                {{$suffixIcon}}
            </div>
            @else
            <div class="">
                {{$suffixText}}
            </div>
            @endif
        </button>
    </div> --}}




</div>