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

@php
	$resolvedIconTextClass = $iconTextClass ?? "text-{$color}-600";
	$resolvedIconBgClass = $iconBgClass ?? "bg-{$color}-100";
@endphp

<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="{{ $resolvedIconTextClass }} {{ $resolvedIconBgClass }} 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>