@props([
    'title' => null,
    'value' => 0,
    'prefix' => '৳',
    'change' => null,
    'changeType' => 'up',
    'icon' => null,
    'iconBg' => 'primary',
    'gradient' => false,
    'href' => null,
])

@php
    $bgClasses = [
        'primary' => 'bg-primary-50 dark:bg-primary-500/10 text-primary-600 dark:text-primary-400',
        'success' => 'bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
        'danger'  => 'bg-rose-50 dark:bg-rose-500/10 text-rose-600 dark:text-rose-400',
        'warning' => 'bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400',
        'info'    => 'bg-sky-50 dark:bg-sky-500/10 text-sky-600 dark:text-sky-400',
        'purple'  => 'bg-purple-50 dark:bg-purple-500/10 text-purple-600 dark:text-purple-400',
        'gray'    => 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300',
    ];
@endphp

@if($href)
    <a href="{{ $href }}" class="block group">
@endif
<div {{ $attributes->merge(['class' => 'relative bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-soft hover:shadow-card transition-all duration-300 overflow-hidden']) }}>
    @if($gradient)
        <div class="absolute inset-0 bg-gradient-to-br from-primary-500/5 to-purple-500/5 pointer-events-none"></div>
    @endif
    <div class="relative p-5">
        <div class="flex items-start justify-between gap-3">
            <div class="flex-1 min-w-0">
                <p class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{{ $title }}</p>
                <p class="mt-2 text-2xl lg:text-3xl font-bold text-slate-900 dark:text-white counter-num">
                    @if($prefix) <span class="text-base font-semibold text-slate-500 dark:text-slate-400">{{ $prefix }}</span> @endif
                    {{ number_format($value) }}
                </p>
                @if($change !== null)
                    <div class="mt-2 flex items-center gap-1.5 text-xs font-semibold {{ $changeType === 'up' ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400' }}">
                        <i data-lucide="{{ $changeType === 'up' ? 'trending-up' : 'trending-down' }}" class="w-3.5 h-3.5"></i>
                        <span>{{ $change }}</span>
                        <span class="text-slate-400 font-normal">vs last month</span>
                    </div>
                @endif
            </div>
            @if($icon)
                <div class="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 {{ $bgClasses[$iconBg] ?? $bgClasses['primary'] }} group-hover:scale-110 transition-transform">
                    <i data-lucide="{{ $icon }}" class="w-6 h-6"></i>
                </div>
            @endif
        </div>
    </div>
</div>
@if($href)
    </a>
@endif
