function StatCard({ label, value }) {
  return (
    <div className="p-3 bg-surface border border-line rounded-md text-left">
      <div className="text-[20px] font-semibold font-mono tracking-[-0.04em] text-fg">{value}</div>
      <div className="text-[11px] text-fg-tertiary font-mono mt-0.5">{label}</div>
    </div>
  );
}

function ProfileStats({ stats }) {
  return (
    <div className="px-4 pb-2 grid grid-cols-3 gap-2">
      {stats.map((s) => (
        <StatCard key={s.label} label={s.label} value={s.value} />
      ))}
    </div>
  );
}

window.ProfileStats = ProfileStats;