export function StatsStrip({
  items,
  tone = "paper",
}: {
  items: { value: string | number; label: string }[];
  tone?: "paper" | "dark" | "violet";
}) {
  const bg =
    tone === "dark"
      ? "bg-neutral-900 text-white"
      : tone === "violet"
        ? "bg-violet-700 text-white"
        : "bg-white text-neutral-900";
  return (
    <dl className={`grid grid-cols-2 divide-x-2 divide-y-2 divide-neutral-900 border-2 border-neutral-900 md:grid-cols-4 md:divide-y-0 ${bg}`}>
      {items.map((it) => (
        <div key={it.label} className="px-6 py-8 text-center">
          <dd className="text-4xl font-black tracking-tight md:text-5xl">{it.value}</dd>
          <dt className="mt-2 text-xs font-black uppercase tracking-[0.2em] opacity-70">
            {it.label}
          </dt>
        </div>
      ))}
    </dl>
  );
}