import React, { useEffect, useRef } from 'react';
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
import './App.css';
import FloatingHeader from './components/floatingHeader';
import ParticlesBackground from './components/ParticlesBackground';
import Home from './pages/Home';
import About from './pages/About';
import WorkExperience from './pages/WorkExperience';
import Projects from './pages/Projects';
import Contact from './pages/Contact';

function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    const backgroundDiv = document.querySelector('.background');
    if (backgroundDiv) {
      backgroundDiv.scrollTop = 0;
    }
  }, [pathname]);

  return null;
}

function App() {

  return (
    <BrowserRouter>
      <ScrollToTop />
      <ParticlesBackground />
      <div className='background'>
        <div className='verticalContentItem'>
          <FloatingHeader></FloatingHeader>
          <div>
            <div style={{ height: "65px" }}></div>
          </div>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/work-experience" element={<WorkExperience />} />
            <Route path="/projects" element={<Projects />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
          <div>
            <div style={{ height: "20px" }}></div>
          </div>
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;