@props(['icon', 'bgColor', 'darkBgColor', 'textColor', 'darkTextColor', 'label', 'value'])

<div class="flex items-center">
    <div class="w-8 h-8 rounded-full {{ $bgColor }} {{ $darkBgColor }} flex items-center justify-center mr-2">
        <x-dynamic-component :component="$icon" class="w-4 h-4 {{ $textColor }} {{ $darkTextColor }}" />
    </div>
    <span class="text-gray-500 dark:text-gray-400 text-sm">{{ $label }}</span>
    <span class="ml-2 font-medium">{{ $value }}</span>
</div>
