import React, { Suspense, useState, useEffect } from "react";

const Hero = React.lazy(() => import("./pages/Hero.jsx"));
const Project = React.lazy(() => import("./pages/Project.jsx"));
const Skill = React.lazy(() => import("./pages/Skill.jsx"));
const Contact = React.lazy(() => import("./pages/Contact.jsx"));
const Experience = React.lazy(() => import("./pages/Experience.jsx"));

function App() {
  const [scrolled, setScrolled] = useState("0%");

  function scrollProgress() {
    const scrollPx = document.documentElement.scrollTop;
    const winHeightPx =
      document.documentElement.scrollHeight -
      document.documentElement.clientHeight;
    const scrolling = `${(scrollPx / winHeightPx) * 100}%`;
    setScrolled(scrolling);
  }

  const progressContainerStyle = {
    height: "10px",
    position: "fixed",
    top: 0,
    left: 0,
    width: "100vw",
    zIndex: 99,
  };

  const progressBarStyle = {
    height: "10px",
    background: "linear-gradient(43deg, #a162e8 0%, #f7ce68 46%, #85ffbd 100%)",
    width: scrolled,
  };

  useEffect(() => {
    window.addEventListener("scroll", scrollProgress);
  }, []);

  return (
    <div>
      <Suspense
        fallback={
          <div className="sk-folding-cube">
            <div className="sk-cube" />
            <div className="sk-cube2 sk-cube" />
            <div className="sk-cube4 sk-cube" />
            <div className="sk-cube3 sk-cube" />
          </div>
        }
      >
        <div className="container mx-auto bg-black">
          {scrolled !== "0%" && (
            <div style={progressContainerStyle}>
              <div style={progressBarStyle} />
            </div>
          )}
          <main>
            <Hero />
            <Experience />
            <Project />
            <Skill />
            <Contact />
          </main>
        </div>
      </Suspense>
    </div>
  );
}

export default App;