import { Route, Link, Routes, BrowserRouter as Router } from 'react-router-dom'

import './assets/css/App.css';
import './assets/css/head.scss'
import menu from './assets/icons/menu.svg'
import Nav from './componets/Nav.js'
import Socials from './componets/Socials.js'
import Name from './componets/Name.js'
import Home from './pages/Home.js'
import Projects from './pages/Projects';
import Activities from './pages/Activities';
import AboutMe from './pages/AboutMe';
import Idler from './componets/Idler'
import ErrorNotFound from './pages/Error'
import AOS from 'aos';
// import 'aos/dist/aos.css'; // You can also use <link> for styles
import { toggleMenu } from './scripts/responsive'


AOS.init();
function App() {
  return (
    <Router>
      <Idler />
      <div className="App">
        <div className="header">
          <Name />
          <img src={menu} alt="menu" id='menu' onClick={toggleMenu}/>
          <Nav id='navbar'>
            <Link to='/'>Home</Link>
            <a href='Resume.pdf' target='_blank'>Resume</a>
            <Link to='/projects'>Projects</Link>
           {/* <Link to='/activities'>Activities</Link> */}
            <Link to='/about'>About Me</Link>
          </Nav>
        </div>
        <Routes>
          <Route exact path='/' element={<Home />}></Route>
          <Route exact path='/projects' element={<Projects />}></Route>
          <Route exact path='activities' element={<Activities />}></Route>
          <Route exact path='/about' element={<AboutMe />}></Route>
          <Route exact path='/notFound' element={<ErrorNotFound />} />
          <Route exact path="/*" element={<ErrorNotFound />} />
        </Routes>
        <div className='footer'>
          <Socials />
        </div>
      </div>
    </Router>
  );
}

export default App;