/* global React, useReveal */
const { useRef: _aUseRef } = React;

function Reveal({ children, delay = 0, className = '', as: As = 'div', ...rest }) {
  const [ref, inView] = useReveal();
  return (
    <As
      ref={ref}
      className={`reveal ${inView ? 'in' : ''} ${className}`}
      style={{ transitionDelay: `${delay}ms` }}
      {...rest}
    >
      {children}
    </As>
  );
}

function SectionHead({ label, number, weekRange, title }) {
  return (
    <div className="section-head">
      <div>
        <div className="section-label">
          <span className="dot"></span>
          <span className="mono">{label} / {number}</span>
        </div>
        {title && (
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', margin: '28px 0 0', maxWidth: '18ch' }}>
            {title}
          </h2>
        )}
      </div>
      {weekRange && (
        <div className="week-counter">
          <div>Weeks</div>
          <div><span className="n">{weekRange}</span> of 15</div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Reveal, SectionHead });