@props(['label', 'value', 'sub' => null, 'icon' => null, 'trend' => null, 'color' => 'slate'])

@php
    $accent = [
        'slate' => 'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300',
        'brand' => 'bg-brand-soft text-brand',
        'green' => 'bg-emerald-50 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-300',
        'red' => 'bg-red-50 text-red-600 dark:bg-red-950 dark:text-red-300',
        'amber' => 'bg-amber-50 text-amber-600 dark:bg-amber-950 dark:text-amber-300',
        'purple' => 'bg-purple-50 text-purple-600 dark:bg-purple-950 dark:text-purple-300',
    ][$color] ?? 'bg-slate-100 text-slate-600';
@endphp

<div {{ $attributes->merge(['class' => 'card p-4']) }}>
    <div class="flex items-start justify-between gap-3">
        <div class="min-w-0">
            <p class="truncate text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400">{{ $label }}</p>
            <p class="tabular mt-1.5 truncate text-2xl font-semibold text-slate-900 dark:text-white">{{ $value }}</p>

            @if ($sub)
                <p class="mt-1 truncate text-xs text-slate-500 dark:text-slate-400">{{ $sub }}</p>
            @endif
        </div>

        @if ($icon)
            <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg {{ $accent }}">
                <x-ui.icon :name="$icon" class="h-4.5 w-4.5" />
            </div>
        @endif
    </div>

    @if ($trend !== null)
        @php $up = (float) $trend >= 0; @endphp
        <p @class(['mt-3 inline-flex items-center gap-1 text-xs font-medium', 'text-emerald-600' => $up, 'text-red-600' => ! $up])>
            <x-ui.icon name="trending" @class(['h-3.5 w-3.5', 'rotate-x-180' => ! $up]) />
            {{ $up ? '+' : '' }}{{ number_format((float) $trend, 1) }}%
            <span class="font-normal text-slate-400">vs previous period</span>
        </p>
    @endif
</div>