import React from 'react'

function formatNumber(value) {
  return new Intl.NumberFormat('en', { notation: value >= 1000 ? 'compact' : 'standard', maximumFractionDigits: 1 }).format(Number(value || 0))
}

export default function WorldRecapStatsGrid({ stats }) {
  const items = Array.isArray(stats?.items) ? stats.items : []

  if (items.length === 0) {
    return null
  }

  return (
    <section className="mt-10 rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
      <div className="mb-5 flex flex-wrap items-end justify-between gap-4">
        <div>
          <h2 className="text-2xl font-semibold tracking-[-0.03em] text-white">Key stats</h2>
          <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">A compact snapshot of how the edition performed before it settled into the archive.</p>
        </div>
        {stats?.captured_at ? <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{stats.source === 'snapshot' ? 'Snapshot captured' : 'Live draft metrics'} {new Date(stats.captured_at).toLocaleDateString()}</div> : null}
      </div>
      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        {items.map((item) => (
          <div key={item.key} className="rounded-[24px] border border-white/10 bg-black/20 p-4">
            <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{item.label}</div>
            <div className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">{formatNumber(item.value)}</div>
            {item.description ? <p className="mt-3 text-sm leading-6 text-slate-400">{item.description}</p> : null}
          </div>
        ))}
      </div>
    </section>
  )
}