import React from "react";

function ensureStyleST(id, css) {
  if (typeof document === "undefined") return;
  if (document.getElementById(id)) return;
  const el = document.createElement("style");
  el.id = id; el.textContent = css;
  document.head.appendChild(el);
}

ensureStyleST("at-stattile", `
  .at-stat{background:var(--at-white);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
  .at-stat__label{font-family:var(--font-sans);font-size:11px;color:var(--fg-3);
    letter-spacing:.06em;text-transform:uppercase;font-weight:600}
  .at-stat__value{font-family:var(--font-display);font-weight:600;font-size:28px;line-height:32px;
    color:var(--fg-1);font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
  .at-stat__meta{font-family:var(--font-sans);font-size:11px;color:var(--fg-3);display:flex;align-items:center;gap:6px}
  .at-statstrip{display:grid;gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);
    border-radius:var(--radius-md);overflow:hidden}
`);

/** A single stat tile (label + big serif numeral + optional meta line). */
export function StatTile({ label, value, meta = null }) {
  return (
    <div className="at-stat">
      <div className="at-stat__label">{label}</div>
      <div className="at-stat__value">{value}</div>
      {meta && <div className="at-stat__meta">{meta}</div>}
    </div>
  );
}

/** Hairline-joined row of StatTiles — the KPI strip at the top of Atlas pages. */
export function StatStrip({ columns, children }) {
  const cols = columns || React.Children.count(children);
  return (
    <div className="at-statstrip" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
      {children}
    </div>
  );
}