@props(['label', 'value', 'unit' => null, 'meta' => null, 'icon' => null, 'warnEdge' => false])

<div {{ $attributes->merge(['class' => 'relative overflow-hidden bg-surface border border-line-soft rounded-card px-4 py-[14px] flex flex-col gap-1.5 transition-colors hover:border-line']) }}>
    @if ($warnEdge)
        <span class="absolute inset-y-0 left-0 w-[3px] bg-warning"></span>
    @endif

    <div class="flex items-center gap-[7px] text-[11px] font-semibold uppercase tracking-[0.08em] text-ink-3">
        @if ($icon)
            <x-icon :name="$icon" :size="13" />
        @endif
        <span>{{ $label }}</span>
    </div>

    <div class="font-mono text-2xl font-extrabold tracking-[-0.02em] tabular-nums text-ink leading-none">
        {{ $value }}@if ($unit)<small class="ml-1 text-[13px] font-semibold text-ink-3">{{ $unit }}</small>@endif
    </div>

    @if ($meta)
        <div class="text-[11.5px] text-ink-3">{{ $meta }}</div>
    @endif
</div>