import React from 'react'
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Pages/Home";
import { useEffect, useState } from "react";
import NoInternetScreen from "./Pages/NoInternetScreen";
import DefaultLayout from "./Layout/DefaultLayout";
import NotFound from './Pages/NotFound';

const App = () => {
  
  const [isOnline, setIsOnline] = useState(navigator.onLine);
  
  useEffect(() => {
    const handleOnlineStatusChange = () => {
      setIsOnline(navigator.onLine);
    };

    window.addEventListener("online", handleOnlineStatusChange);
    window.addEventListener("offline", handleOnlineStatusChange);

    return () => {
      window.removeEventListener("online", handleOnlineStatusChange);
      window.removeEventListener("offline", handleOnlineStatusChange);
    };
  }, []);


  return (
    <Router>
      <Routes>
        <Route
          path="/*"
          element={isOnline ? <DefaultLayout /> : <NoInternetScreen />}
        />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

export default App;
