import { useEffect } from "react";
import "./App.css";
import WebFont from "webfontloader";
import { Routes, Route } from "react-router-dom";
import { Home } from "./Home";
import NotFound from "./components/Pages/NotFound";
import Login from "./components/Pages/Login";
import Register from "./components/Pages/Register";
import ResentVerification from "./components/Pages/ResendVerification";
import ForgotPassword from "./components/Pages/ForgotPassword";

function App() {
  useEffect(() => {
    WebFont.load({
      google: {
        families: [
          "Roboto:300,400,500,700",
          "Open Sans:300,400,600,700",
          "Lato:300,400,700",
          "Montserrat:300,400,500,700",
          "Raleway:300,400,500,700",
          "Poppins:300,400,500,700",
          "Merriweather:300,400,700",
          "Playfair Display:400,500,700",
          "Nunito:300,400,600,700",
          "Oswald:300,400,500,600",
          "Source Sans Pro:300,400,600,700",
          "Ubuntu:300,400,500,700",
          "Noto Sans:300,400,500,700",
          "Work Sans:300,400,500,700",
          "Bebas Neue",
          "Arimo:300,400,500,700",
          "PT Sans:300,400,700",
          "PT Serif:300,400,700",
          "Titillium Web:300,400,600,700",
          "Fira Sans:300,400,500,700",
          "Karla:300,400,600,700",
          "Josefin Sans:300,400,500,700",
          "Cairo:300,400,600,700",
          "Rubik:300,400,500,700",
          "Mulish:300,400,500,700",
          "IBM Plex Sans:300,400,500,700",
          "Quicksand:300,400,500,700",
          "Cabin:300,400,500,700",
          "Heebo:300,400,500,700",
          "Exo 2:300,400,500,700",
          "Manrope:300,400,500,700",
          "Jost:300,400,500,700",
          "Anton",
          "Asap:300,400,600,700",
          "Baloo 2:300,400,500,700",
          "Barlow:300,400,500,700",
          "Cantarell:300,400,700",
          "Chivo:300,400,500,700",
          "Inter:300,400,500,700",
          "Dosis:300,400,500,700",
          "Crimson Text:300,400,600,700",
          "Amatic SC:300,400,700",
          "ABeeZee",
          "Raleway Dots",
          "Pacifico",
          "Orbitron:300,400,500,700",
          "Varela Round",
          "Acme",
          "Teko:300,400,500,700",
        ],
      },
    });
  }, []);

  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/:id" element={<Home />} />
      <Route path="*" element={<NotFound />} />
      <Route path="/notFound" element={<NotFound />} />
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />
      <Route path="/resend-verification" element={<ResentVerification />} />
      <Route path="/forgot-password" element={<ForgotPassword />} />
    </Routes>
  );
}

export default App;