@props([
    'title' => '',
    'value' => '0.00',
    'currency' => 'USDT',
    'subtitle' => null,
    'trend' => null,
    'trendType' => 'up', // up, down, neutral
    'icon' => null,
    'color' => 'slate', // emerald, indigo, rose, amber, slate
])

@php
    $colorMap = [
        'emerald' => [
            'iconBg' => 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20',
            'badge' => 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-950/50 dark:text-emerald-300 dark:border-emerald-800',
            'borderHover' => 'hover:border-emerald-300 dark:hover:border-emerald-700',
        ],
        'indigo' => [
            'iconBg' => 'bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border-indigo-500/20',
            'badge' => 'bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-950/50 dark:text-indigo-300 dark:border-indigo-800',
            'borderHover' => 'hover:border-indigo-300 dark:hover:border-indigo-700',
        ],
        'rose' => [
            'iconBg' => 'bg-rose-500/10 text-rose-600 dark:text-rose-400 border-rose-500/20',
            'badge' => 'bg-rose-50 text-rose-700 border-rose-200 dark:bg-rose-950/50 dark:text-rose-300 dark:border-rose-800',
            'borderHover' => 'hover:border-rose-300 dark:hover:border-rose-700',
        ],
        'amber' => [
            'iconBg' => 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20',
            'badge' => 'bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950/50 dark:text-amber-300 dark:border-amber-800',
            'borderHover' => 'hover:border-amber-300 dark:hover:border-amber-700',
        ],
        'slate' => [
            'iconBg' => 'bg-slate-500/10 text-slate-600 dark:text-slate-400 border-slate-500/20',
            'badge' => 'bg-slate-50 text-slate-700 border-slate-200 dark:bg-slate-900/50 dark:text-slate-300 dark:border-slate-800',
            'borderHover' => 'hover:border-slate-300 dark:hover:border-slate-700',
        ],
    ];
    $theme = $colorMap[$color] ?? $colorMap['slate'];
@endphp

<div {{ $attributes->merge(['class' => "relative overflow-hidden bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800/80 rounded-2xl p-5 shadow-sm transition-all duration-300 hover:shadow-md {$theme['borderHover']} group"]) }}>
    <!-- Brillo superior decorativo sutil -->
    <div class="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-current to-transparent opacity-0 group-hover:opacity-20 transition-opacity"></div>

    <div class="flex items-start justify-between gap-3">
        <div>
            <p class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 font-sans">{{ $title }}</p>
            <div class="mt-2 flex items-baseline gap-2">
                <span class="text-2xl lg:text-3xl font-bold font-display tracking-tight text-slate-900 dark:text-white">
                    {{ $value }}
                </span>
                @if ($currency)
                    <span class="text-xs font-bold text-slate-600 dark:text-slate-400 bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded border border-slate-200 dark:border-slate-700">
                        {{ $currency }}
                    </span>
                @endif
            </div>

            @if ($subtitle || $trend)
                <div class="mt-2.5 flex items-center gap-2 text-xs">
                    @if ($trend)
                        <span class="inline-flex items-center gap-1 font-semibold px-2 py-0.5 rounded-full border {{ $theme['badge'] }}">
                            @if ($trendType === 'up')
                                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                            @elseif ($trendType === 'down')
                                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"/></svg>
                            @endif
                            {{ $trend }}
                        </span>
                    @endif
                    @if ($subtitle)
                        <span class="text-slate-500 dark:text-slate-400 truncate">{{ $subtitle }}</span>
                    @endif
                </div>
            @endif
        </div>

        @if ($icon)
            <div class="w-11 h-11 rounded-2xl flex items-center justify-center border shrink-0 {{ $theme['iconBg'] }} transition-transform duration-300 group-hover:scale-110">
                {{ $icon }}
            </div>
        @endif
    </div>
</div>