<template>


<div class="relative bg-green-600 md:pb-32 pb-32 pt-12 -mx-4">
   <div class="px-5 mx-auto w-full">
      <div>
         <div class="flex flex-wrap">

            <div class="w-full lg:w-6/12 xl:w-3/12 px-4" v-for="(item, i) in datas" :key="i">
               <div class="relative flex flex-col min-w-0 break-words bg-white rounded mb-6 xl:mb-0 shadow-lg">
                  <div class="flex-auto p-4">
                     <div class="flex flex-wrap">
                        <div class="relative w-full pr-4 max-w-full flex-grow flex-1">
                           <h5 class="text-blueGray-400 uppercase font-bold text-xs">{{ item.name }}</h5>
                           <span class="font-semibold text-xl text-blueGray-700">{{ item.count }} </span> <small>{{ item.type }}</small>
                        </div>
                        <div class="relative w-auto pl-4 flex-initial">
                           <div class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 shadow-lg rounded-full" :class="item.color">
                              <i :class="item.icon"></i></div>
                        </div>
                     </div>
                     <p class="text-sm text-blueGray-400 mt-4">
                         <span class="mr-2 " :class="item.progress >= 0 ? 'text-green-500' : 'text-red-500'">
                             <i class="fas " :class="item.progress >= 0  ? 'fa-arrow-up' : 'fa-arrow-down'"></i> {{ item.current }}%
                        </span>
                        <span class="whitespace-nowrap">Since last month</span>
                    </p>
                  </div>
               </div>
            </div>

         </div>
      </div>
   </div>
</div>



</template>

<script>
    export default {
        props:['datas']
    }
</script>
