@props([
    'icon' => 'box',
    'iconColor' => 'text-green-400',
    'badgeColor' => 'bg-green-400',
    'title' => '',
    'value' => 0,
    'label' => '',
    'tooltip' => '',
    'animationDelay' => 0
])

<div class="report-box zoom-in min-w-full relative hover:scale-105 transition-all duration-300 animate__animated animate__fadeInUp"
     style="animation-delay: {{ $animationDelay }}s;">
    <div class="box p-3 bg-white shadow-lg rounded-lg relative overflow-hidden">
        
        <!-- Main content -->
        <div class="relative z-10">
            <div class="flex items-start justify-between">
                <i data-lucide="{{ $icon }}" class="w-6 h-6 {{ $iconColor }}"></i>

                <div class="relative">
                    <div 
                         class="relative {{ $badgeColor }} text-white text-sm rounded-full px-3 py-1 cursor-pointer flex items-center transition-all duration-200 hover:shadow-md">
                        {{ $title }}
                        <i data-lucide="chevron-up" class="w-4 h-4 text-white ml-1"></i>
                    </div>
                </div>
            </div>

            <div class="text-xl font-medium leading-8 mt-6">
                <span class="text_siderbar_top">{{ $value }}</span>
            </div>
            <div class="text-base text-slate-500 mt-1">{{ $label }}</div>
        </div>
    </div>
</div>