@props(['title','value','color'=>'slate','icon'=>'fa-cube'])

<div class="bg-{{ $color }}-100 p-4 rounded-xl text-center shadow hover:shadow-md transition">
  <div class="flex justify-center mb-2">
    <div class="h-10 w-10 rounded-full flex items-center justify-center bg-{{ $color }}-200">
      <i class="fa {{ $icon }} text-{{ $color }}-700"></i>
    </div>
  </div>
  <h2 class="text-xl font-bold text-{{ $color }}-800">{{ $value }}</h2>
  <p class="text-{{ $color }}-700 text-sm">{{ $title }}</p>
</div>
