---
import type { SystemStat } from '../lib/types';

interface Props {
  stats: SystemStat[];
}

const { stats } = Astro.props;
---

<ul class="grid gap-3">
  {stats.map((stat, index) => (
    <li class="terminal-panel-muted terminal-panel-accent terminal-interactive-card rounded-2xl px-4 py-4" style="--accent-rgb: var(--primary-rgb); --accent-color: var(--primary);">
      <div class="flex items-center justify-between gap-4">
        <div class="flex min-w-0 items-center gap-3">
          <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-[color:color-mix(in_oklab,var(--primary)_16%,var(--border-color))] bg-[linear-gradient(180deg,color-mix(in_oklab,var(--primary)_18%,var(--terminal-bg)),color-mix(in_oklab,var(--primary)_10%,var(--header-bg)))] text-[var(--primary)] shadow-[0_10px_24px_rgba(var(--text-rgb),0.06)]">
            <span class="font-mono text-xs">{String(index + 1).padStart(2, '0')}</span>
          </span>
          <div class="min-w-0">
            <div class="text-[11px] uppercase tracking-[0.22em] text-[var(--text-tertiary)]">{stat.label}</div>
            <div class="mt-1 text-lg font-semibold text-[var(--title-color)]">{stat.value}</div>
          </div>
        </div>
        <span class="h-10 w-px bg-[linear-gradient(180deg,transparent,rgba(var(--primary-rgb),0.22),transparent)]"></span>
      </div>
    </li>
  ))}
</ul>
