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

interface Props {
  stats: SystemStat[];
}

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

<ul class="space-y-3 font-mono text-sm">
  {stats.map(stat => (
    <li>
      <InfoTile layout="row" tone="neutral">
        <span class="text-[var(--text-secondary)] uppercase tracking-[0.18em] text-[11px]">{stat.label}</span>
        <span class="text-[var(--title-color)] font-bold text-base">{stat.value}</span>
      </InfoTile>
    </li>
  ))}
</ul>