@props(['element1','element2','element3','element4','theme'=>'bg-gray-500','sary'=>''])

    <div class="overflow-hidden bg-white h-full min-h-32 rounded border shadow flex items-center gap-5 p-2">
        <div class=" flex pr-1 h-full w-10 shadow bg-gray-100 rounded-r-full items-center">
            <div class="ring-2 ring-gray-500 ring-offset-0 overflow-hidden translate-x-2 shadow-sm {{$theme}} text-white text-sm font-semibold w-12 h-12 min-w-12 min-h-12 max-w-12 max-h-12 flex justify-center items-center rounded-full">
                @if($element1==='sary')
                    <x-img-mpiandry :sary="$sary"></x-img-mpiandry>
                @else
                {{$element1}}
                @endif
            </div>
        </div>    
        <div class="flex flex-col pl-2 w-full">
            <div class="font-bold leading-5 text-sm text-gray-700">
                {{$element2}}
            </div>
            <div class="text-xs mt-3">{{$element3}}</div>
            <div class="text-xs text-gray-500">{{$element4}}</div>
        </div>
    </div>