// Cell tile used in the Connections "Lodgify hero" stat strip.
function StatBlock({ label, value, sub, emphasis, mono, clickable, onClick }) {
  return (
    <div onClick={onClick}
         style={{
           background: 'var(--bg-elev)', padding: '16px 18px',
           cursor: clickable ? 'pointer' : 'default',
           transition: 'background 0.15s',
         }}
         onMouseEnter={e => clickable && (e.currentTarget.style.background = 'var(--bg-sunken)')}
         onMouseLeave={e => clickable && (e.currentTarget.style.background = 'var(--bg-elev)')}>
      <div className="xs muted" style={{ letterSpacing: 0.3 }}>{label}</div>
      <div className="serif tabular" style={{
        fontSize: 22, letterSpacing: '-0.01em', marginTop: 4, fontWeight: 400,
        color: emphasis ? 'var(--accent)' : 'var(--text)',
        fontFamily: mono ? 'var(--font-mono, ui-monospace, "SF Mono", monospace)' : undefined,
      }}>
        {value}
      </div>
      <div className="xs muted" style={{ marginTop: 4, lineHeight: 1.4, display: 'flex', alignItems: 'center', gap: 4 }}>
        {sub}
        {clickable && <span style={{ marginLeft: 'auto', opacity: 0.6 }}>→</span>}
      </div>
    </div>
  );
}

Object.assign(window, { StatBlock });