@props(['label', 'value', 'previousValue' => null, 'format' => 'number', 'suffix' => ''])

@php
    $formatted = match($format) {
        'duration' => gmdate('i:s', (int) $value),
        'percent' => $value . '%',
        default => number_format($value) . $suffix,
    };

    $delta = null;
    $deltaClass = '';
    $deltaIcon = '';
    if ($previousValue !== null && is_numeric($previousValue)) {
        if ($previousValue > 0) {
            $delta = round((($value - $previousValue) / $previousValue) * 100, 1);
        } elseif ($value > 0) {
            $delta = 100;
        }

        if ($delta !== null) {
            $isNegativeBetter = in_array($format, ['percent']) && str_contains(strtolower($label), 'bounce');
            $isPositive = $delta > 0;
            $isGood = $isNegativeBetter ? !$isPositive : $isPositive;

            $deltaClass = $delta == 0
                ? 'text-gray-500 bg-gray-50'
                : ($isGood ? 'text-emerald-700 bg-emerald-50' : 'text-red-700 bg-red-50');
            $deltaIcon = $delta > 0 ? '↑' : ($delta < 0 ? '↓' : '→');
        }
    }
@endphp

<div class="bg-white rounded-xl border border-gray-200 p-5 hover:shadow-sm transition-shadow">
    <dt class="text-sm font-medium text-gray-500 truncate">{{ $label }}</dt>
    <dd class="mt-2 flex items-baseline gap-2">
        <span class="text-2xl font-bold text-gray-900 tracking-tight">{{ $formatted }}</span>
        @if ($delta !== null)
            <span class="inline-flex items-center gap-0.5 rounded-full px-2 py-0.5 text-xs font-medium {{ $deltaClass }}">
                {{ $deltaIcon }} {{ abs($delta) }}%
            </span>
        @endif
    </dd>
</div>