@props([
    'label',
    'value',
    'icon'  => 'chart',
    'tone'  => 'brand',        // brand|ok|warn|bad|info|muted
    'trend' => null,           // ['direction' => up|down, 'percent' => float|null] or null
    'hint'  => null,
    'goodWhenDown' => false,   // e.g. expired licences falling is good news
    'dense' => false,          // for pages where the card is furniture, not the subject
])

@php
    $tones = [
        'brand' => ['bg' => 'bg-brand-50 dark:bg-brand-500/10',   'fg' => 'text-brand-600 dark:text-brand-400'],
        'ok'    => ['bg' => 'bg-emerald-50 dark:bg-emerald-500/10','fg' => 'text-emerald-600 dark:text-emerald-400'],
        'warn'  => ['bg' => 'bg-amber-50 dark:bg-amber-500/10',    'fg' => 'text-amber-600 dark:text-amber-400'],
        'bad'   => ['bg' => 'bg-red-50 dark:bg-red-500/10',        'fg' => 'text-red-600 dark:text-red-400'],
        'info'  => ['bg' => 'bg-blue-50 dark:bg-blue-500/10',      'fg' => 'text-blue-600 dark:text-blue-400'],
        'muted' => ['bg' => 'bg-slate-100 dark:bg-slate-700/40',   'fg' => 'text-slate-600 dark:text-slate-300'],
    ];
    $t = $tones[$tone] ?? $tones['brand'];

    // A rising number is not automatically good news - expired licences going
    // up is bad. goodWhenDown flips the colour without flipping the arrow, so
    // the direction stays factual and only the sentiment changes.
    $isUp        = ($trend['direction'] ?? null) === 'up';
    $isPositive  = $goodWhenDown ? ! $isUp : $isUp;
    $trendColour = $isPositive
        ? 'text-emerald-600 dark:text-emerald-400'
        : 'text-red-600 dark:text-red-400';
@endphp

<div class="surface surface-hover {{ $dense ? 'p-3.5' : 'p-5' }}">
    <div class="flex items-start justify-between gap-3">
        <div class="min-w-0">
            <p class="{{ $dense ? 'text-[10px]' : 'text-xs' }} font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
                {{ $label }}
            </p>
            <p class="{{ $dense ? 'mt-1 text-xl' : 'mt-2 text-2xl sm:text-3xl' }} truncate font-bold text-slate-900 dark:text-white">
                {{ $value }}
            </p>
        </div>

        <span class="grid {{ $dense ? 'size-9' : 'size-12' }} shrink-0 place-items-center rounded-xl {{ $t['bg'] }} {{ $t['fg'] }}"
              aria-hidden="true">
            <x-icon :name="$icon" class="{{ $dense ? 'size-4.5' : 'size-6' }}" />
        </span>
    </div>

    <div class="{{ $dense ? 'mt-1.5' : 'mt-3' }} flex items-center gap-1.5 text-xs">
        @if ($trend && $trend['percent'] !== null)
            <span class="inline-flex items-center gap-1 font-semibold {{ $trendColour }}">
                <x-icon :name="$isUp ? 'arrow-up' : 'arrow-down'" class="size-3.5" />
                {{ $trend['percent'] }}%
            </span>
            <span class="text-slate-500 dark:text-slate-400">from last period</span>
        @elseif ($trend)
            {{-- Movement with nothing to compare against: say so rather than --}}
            {{-- printing a meaningless 100%. --}}
            <span class="inline-flex items-center gap-1 font-semibold {{ $trendColour }}">
                <x-icon name="arrow-up" class="size-3.5" /> New
            </span>
            <span class="text-slate-500 dark:text-slate-400">no prior period</span>
        @else
            <span class="text-slate-400 dark:text-slate-500">{{ $hint ?? 'No change to report' }}</span>
        @endif
    </div>
</div>