@props(['title', 'value', 'icon' => 'bar-chart', 'color' => 'blue', 'filter' => null])

<div wire:click="$set('filtroStatus', @js($filter))"
	class="relative cursor-pointer overflow-hidden rounded-lg bg-white px-4 pb-5 pt-5 shadow-sm hover:bg-yellow-50 sm:px-6 sm:pt-6">
	<dt>
		<div class="text-{{ $color }}-600 bg-{{ $color }}-100 absolute rounded-md p-3">

			<x-dynamic-component :component="$icon" class="h-6 w-6" />
		</div>
		<p class="ml-16 truncate text-sm font-medium text-gray-500">{{ $title }}</p>
	</dt>
	<dd class="ml-16 flex items-baseline pb-3 sm:pb-2">
		<p class="text-2xl font-semibold text-gray-900">{{ $value }}</p>
	</dd>
</div>