import { css } from "glamor";
import React from "react";

export const FadeInView: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const [isVisible, setVisible] = React.useState(true);
  const domRef = React.useRef<HTMLDivElement>(null);
  React.useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => setVisible(entry.isIntersecting));
    });
    if (domRef.current) {
      observer.observe(domRef.current);
    }
    return () => {
      if (domRef.current) {
        observer.unobserve(domRef.current);
      }
    };
  }, []);

  const fadeinStyle = {
    opacity: "0",
    transform: "translateY(20vh)",
    visibility: "hidden",
    transition: "opacity 0.6s ease-out, transform 1.2s ease-out",
    willChange: "opacity, visibility",
  };
  const fadeInVisible = {
    opacity: "1",
    transform: "none",
    visibility: "visible",
  };

  return (
    <div {...css(fadeinStyle, isVisible ? fadeInVisible : {})} ref={domRef}>
      {children}
    </div>
  );
};