Forge Heartbeat Status code

@props([
    'status' => 'Healthy',
    'statusVariant' => 'green',
    'lastPing' => null,
    'threshold' => null,
    'endpoint' => null,
])

@php
    /*
    | Heartbeat monitor status card for scheduled jobs. Shows the latest ping,
    | failure threshold and the generated endpoint that jobs should call.
    |
    | Usage:
    |   <x-ui.forge-heartbeat-status endpoint="https://forge.test/heartbeat/..." />
    */
@endphp

<article {{ $attributes->merge(['class' => 'min-w-0 rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900']) }}>
    <div class="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
        <div class="min-w-0">
            <p class="text-sm font-semibold text-gray-900 dark:text-white">Heartbeat monitor</p>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Notify when a scheduled job stops checking in.</p>
        </div>

        <x-ui.badge :variant="$statusVariant" size="sm" dot class="w-fit sm:shrink-0">{{ $status }}</x-ui.badge>
    </div>

    <x-ui.status-bar class="mt-4" :items="array_values(array_filter([
        $lastPing ? ['icon' => 'pulse', 'label' => 'Last ping', 'value' => $lastPing] : null,
        $threshold ? ['icon' => 'timer', 'label' => 'Notify after', 'value' => $threshold] : null,
    ]))" />

    @if ($endpoint)
        <div class="mt-4 max-w-full overflow-x-auto rounded-lg bg-gray-950 px-3 py-2 font-mono text-[11px] leading-5 text-gray-200 sm:text-xs [&_.tok-str]:text-green-300">
            <code class="tok-str block min-w-0 whitespace-pre-wrap break-all">{{ $endpoint }}</code>
        </div>
    @endif
</article>