@props(['label', 'value', 'unit' => null, 'tone' => 'ink', 'icon' => null, 'pct' => null])
@php
    $valueColor = [
        'ink' => 'text-ink', 'online' => 'text-online', 'warning' => 'text-warning',
        'offline' => 'text-offline', 'accent' => 'text-accent-text', 'cyan' => 'text-cyan-bright',
    ][$tone] ?? 'text-ink';
    $barColor = [
        'ink' => 'bg-accent', 'online' => 'bg-online', 'warning' => 'bg-warning',
        'offline' => 'bg-offline', 'accent' => 'bg-accent', 'cyan' => 'bg-cyan',
    ][$tone] ?? 'bg-accent';
@endphp
<div {{ $attributes->merge(['class' => 'rounded-lg border border-line bg-surface p-4 shadow-panel']) }}>
    <div class="flex items-center justify-between gap-2">
        <p class="font-mono text-[11px] uppercase tracking-wider text-ink-3">{{ $label }}</p>
        @if ($icon)
            <x-icon :name="$icon" class="h-4 w-4 text-ink-4" />
        @endif
    </div>
    <p class="mt-2 flex items-baseline gap-1">
        <span class="tabular font-mono text-2xl font-semibold {{ $valueColor }}">{{ $value }}</span>
        @if ($unit)
            <span class="font-mono text-xs text-ink-3">{{ $unit }}</span>
        @endif
    </p>
    @if (! is_null($pct))
        <div class="mt-3 h-1.5 w-full overflow-hidden rounded-full bg-inset">
            <div class="h-full rounded-full {{ $barColor }}" style="width: {{ $pct }}%"></div>
        </div>
    @endif
</div>