@props(['title','value','icon'])
<div {{$attributes->merge(['class'=>"flex justify-between flex-col p-4 bg-white rounded-md h-36"])}}>
    <div class="flex justify-between items-center">
        <div class="text-gray-500 font-bold flex flex-col justify-between h-18">
            <h2>{{$title}}</h2>
            <p class="text-2xl">{{$value}}</p>
        </div>
        <div class="bg-purple-200 p-4 rounded">
            <span class="fa fa-{{$icon}} fa-2x text-purple-900"></span>
        </div>
    </div>
    <div class="flex justify-between items-center text-xs">
        <p class="text-purple-900 font-bold">Details</p>
        <i class="text-purple-900 font-bold fa fa-arrow-right"></i>
    </div>
</div>