@props([
    'label',
    // The figure, and the unit that follows it in lighter weight — "235" and
    // "/ 500 GB" read as one measurement rather than as two numbers.
    'value',
    'unit' => null,
    'foot' => null,
    // A chevron to the page that explains the figure. Omitted where there is
    // no such page: a chevron that goes nowhere is worse than none.
    'href' => null,
])
{{--
    One metric card, exactly as the approved template draws it: small caps
    label with an optional chevron, the figure in tabular monospace with its
    unit beside it, a line of context underneath, and the visual on the right.

    The visual is a slot so the card does not have to know whether it is a
    ring, a bar or a sparkline — and so a metric with nothing to draw simply
    passes none instead of getting a decorative one.
--}}
<article {{ $attributes->merge(['class' => 'overflow-hidden rounded-lg border border-line bg-surface px-5 py-[18px] shadow-xs']) }}>
    <div class="flex items-center justify-between gap-2.5">
        <span class="lbl">{{ $label }}</span>
        @if ($href)
            <a href="{{ $href }}" wire:navigate class="text-muted transition hover:text-ink" aria-label="{{ $label }}">
                <x-ui.icon name="chevron-down" class="size-3.5 -rotate-90" />
            </a>
        @endif
    </div>

    <div class="mt-1.5 flex items-end justify-between gap-3.5">
        <div class="min-w-0">
            <p class="mt-[9px] flex flex-wrap items-baseline gap-x-1.5 font-mono text-[25px] font-semibold leading-tight tracking-[-0.02em] text-ink">
                {{ $value }}
                @if ($unit)<span class="text-[13px] font-[450] text-muted">{{ $unit }}</span>@endif
            </p>
            @if ($foot)
                <p class="mt-1.5 text-[12px] leading-snug text-muted">{{ $foot }}</p>
            @endif
        </div>

        @isset($visual)
            <div class="shrink-0">{{ $visual }}</div>
        @endisset
    </div>

    {{ $slot }}
</article>