@props([
    'icon' => 'squares-2x2',
    'title' => '',
    'value' => 0,
    'trend' => null,            // numeric percentage, e.g. 12 or -4
    'color' => 'green',         // see $palette below
    'link' => null,
])

{{--
    StatCard (component.md). Colour classes are written as literal strings in
    $palette so Tailwind's content scanner keeps them in the build.
--}}

@php
    $palette = [
        'green'  => ['bg' => 'bg-green-100 dark:bg-green-900/30',   'text' => 'text-green-600 dark:text-green-400'],
        'blue'   => ['bg' => 'bg-blue-100 dark:bg-blue-900/30',     'text' => 'text-blue-600 dark:text-blue-400'],
        'purple' => ['bg' => 'bg-purple-100 dark:bg-purple-900/30', 'text' => 'text-purple-600 dark:text-purple-400'],
        'pink'   => ['bg' => 'bg-pink-100 dark:bg-pink-900/30',     'text' => 'text-pink-600 dark:text-pink-400'],
        'indigo' => ['bg' => 'bg-indigo-100 dark:bg-indigo-900/30', 'text' => 'text-indigo-600 dark:text-indigo-400'],
        'yellow' => ['bg' => 'bg-yellow-100 dark:bg-yellow-900/30', 'text' => 'text-yellow-600 dark:text-yellow-400'],
        'orange' => ['bg' => 'bg-orange-100 dark:bg-orange-900/30', 'text' => 'text-orange-600 dark:text-orange-400'],
        'teal'   => ['bg' => 'bg-teal-100 dark:bg-teal-900/30',     'text' => 'text-teal-600 dark:text-teal-400'],
    ];
    $c = $palette[$color] ?? $palette['green'];
    $tag = $link ? 'a' : 'div';
@endphp

<{{ $tag }} @if ($link) href="{{ $link }}" @endif
    {{ $attributes->merge(['class' => 'card-interactive group block animate-fade-in']) }}>
    <div class="flex items-start justify-between gap-4">
        <div class="min-w-0">
            <p class="truncate text-sm text-secondary dark:text-dark-text-secondary">{{ $title }}</p>
            <p class="mt-1 text-3xl font-bold text-primary dark:text-dark-text">{{ $value }}</p>
            @if (! is_null($trend))
                <span class="mt-1 inline-flex items-center gap-0.5 text-xs font-medium {{ $trend >= 0 ? 'text-success' : 'text-danger' }}">
                    {{ $trend >= 0 ? '↑' : '↓' }} {{ abs($trend) }}%
                    <span class="text-muted">vs kemarin</span>
                </span>
            @endif
        </div>
        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl transition-transform duration-250 group-hover:scale-110 {{ $c['bg'] }}">
            <x-icon :name="$icon" class="h-6 w-6 {{ $c['text'] }}" />
        </div>
    </div>
</{{ $tag }}>