/* global React, ReactDOM, DesktopSite, MobileSite */
const { useState, useEffect } = React;

// Breakpoint: below 768px we render the mobile site.
const MOBILE_BREAKPOINT = 768;

function ResponsiveSite() {
  const [isMobile, setIsMobile] = useState(
    typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT : false
  );

  useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  return isMobile ? <MobileSite /> : <DesktopSite />;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<ResponsiveSite />);