@props(['icon', 'title', 'desc'])

<div class="flex items-center space-x-2">
    <div class="w-8 h-8 rounded-lg bg-white/20 backdrop-blur-sm flex items-center justify-center">
        <x-dynamic-component :component="'flux::icon.' . $icon" class="text-white w-5 h-5" variant="solid" />
    </div>
    <div>
        <h3 class="text-white text-xs font-semibold">{{ $title }}</h3>
        <p class="text-white/80 text-xs">{{ $desc }}</p>
    </div>
</div>
