@props([
    'title' => '',
    'tooltip' => '',
    'icon' => 'box',
    'value' => 0,
    'bg' => 'bg-white',
    'color' => 'primary', // màu chính: primary, success, danger,...
    'width' => 'w-[300px]',
])

@php
    $textColor = match ($color) {
        'primary' => 'text-primary',
        'success' => 'text-green-500',
        'danger' => 'text-red-500',
        'warning' => 'text-yellow-500',
        default => 'text-slate-700',
    };

    $iconColor = $textColor;
    $tooltipBg = match ($color) {
        'primary' => 'bg-orange-500',
        'success' => 'bg-green-500',
        'danger' => 'bg-red-500',
        'warning' => 'bg-yellow-500',
        default => 'bg-gray-800',
    };
@endphp

<div
    class="report-box zoom-in {{ $width }} relative hover:scale-105 transition-all duration-300 zoom-in before:box before:absolute before:inset-x-3 before:mt-3 before:h-full before:bg-slate-200 before:content-[''] before:rounded-lg animate__animated animate__fadeInRight">
    <div class="box p-3 {{ $bg }} shadow-lg rounded-lg relative">
        <!-- Nội dung chính -->
        <div class="relative z-10">
            <div class="flex items-start">
                <i data-lucide="{{ $icon }}" class="w-6 h-6 {{ $iconColor }}"></i>

                <div class="ml-auto" x-data="{ showTooltip: false }">
                    <div @mouseenter="showTooltip = true" @mouseleave="showTooltip = false"
                        class="relative {{ $tooltipBg }} text-white text-sm rounded-full p-2 cursor-pointer flex items-center">
                        {{ $tooltip }}
                        <i data-lucide="chevron-up" class="w-4 h-4 text-white inline-block ml-1"></i>

                        <div x-cloak x-show="showTooltip" x-transition
                            class="absolute -top-10 right-0 mt-2 bg-gray-800 text-white text-xs px-3 py-1 rounded shadow-lg z-50 whitespace-nowrap">
                            {{ $tooltip }}
                        </div>
                    </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">{{ $title }}</div>
        </div>
    </div>
</div>