/* global React, useInView */

const { useRef } = React;

// Fades children in the first time the element enters the viewport.
// delay: 0–7, maps to CSS animation-delay steps via data-d attribute.
function Reveal({ as: Tag = "div", className = "", delay = 0, children, ...rest }) {
  const ref  = useRef(null);
  const seen = useInView(ref);
  return (
    <Tag
      ref={ref}
      className={`reveal ${seen ? "in" : ""} ${className}`}
      data-d={delay}
      {...rest}
    >
      {children}
    </Tag>
  );
}

Object.assign(window, { Reveal });