@props([
    'icon',
    'label',
    'value' => null,
    'color' => 'text-primary-600',
    'colspan' => '',
])

<div class="flex flex-col gap-0.5 bg-gray-50 p-2 rounded shadow-sm hover:shadow-md transition-shadow duration-200">
    <div class="flex items-center gap-1.5 text-xs text-gray-500 select-none">
        <x-dynamic-component :component="$icon" class="w-4 h-4 {{ $color }}" />
        <span class="font-semibold">{{ $label }}</span>
    </div>
    <div class="text-sm font-medium text-gray-800 truncate" title="{{ $value ?? 'No disponible' }}">
        {{ $value ?? 'No disponible' }}
    </div>
</div>