@props([
    'title', 
    'value', 
    'icon', // ← Añade esta línea
    'color',
    'trend' => null,                 // Valor por defecto: null
    'trendColor' => 'text-gray-500'  // Color por defecto
])

<div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition duration-300">
    <div class="flex items-center justify-between">
        <div>
            <h2>
                <p class="text-xl font-bold text-gray-500">{{ $title }}</p>
            </h2>
            <p class="text-2xl font-bold">{{ $value }}</p>
        </div>
        <div class="{{ $color }} p-3 rounded-full">
            @if($icon === 'folder')
            <flux:icon.folder variant="solid" class="w-8 h-8 text-white"/>
            @elseif($icon === 'document')
            <flux:icon.document variant="solid" class="w-8 h-8 text-white"/>
            @elseif($icon === 'storage')
            <flux:icon.server variant="solid" class="w-8 h-8 text-white"/>
            @elseif($icon === 'clock')
            <flux:icon.clock variant="solid" class="w-8 h-8 text-white"/>
            @endif
        </div>
    </div>
    <div class="mt-4">
        <span class="text-sm {{ $trendColor }}">
            <x-icons icon="arrow-up" class="w-4 h-4 inline" /> {{ $trend }}%
        </span>
        <span class="text-sm text-gray-500">desde el último mes</span>
    </div>
</div>