import React, { Suspense } from 'react'
import NavBar from './NavigationBar'
import Home from './Home'
import About from './About'
import Settings from './Settings'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'

function App() {

  const exampleData = [
    { name: 'Timestamp A', temperature: 38, humidity: 66, light: 75, moisture: 21 },
    { name: 'Timestamp B', temperature: 37, humidity: 65, light: 65, moisture: 22 },
    { name: 'Timestamp C', temperature: 39, humidity: 62, light: 55, moisture: 22 },
    { name: 'Timestamp D', temperature: 40, humidity: 61, light: 85, moisture: 21 },
    { name: 'Timestamp E', temperature: 40, humidity: 60, light: 80, moisture: 21 }
  ];

  return (
    <>
      <NavBar/>
      <Router>
        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
            <Route path="/" exact>
              <Home dummyData={exampleData}></Home>
            </Route>
            <Route path="/settings">
              <Settings></Settings>
            </Route>
            <Route path="/about" component={About}></Route>
          </Switch>
        </Suspense>
      </Router>
    </>
  )
}

export default App;