import React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import loadable from '@loadable/component'

import Loading from './Loading'

const LoadableLogin = loadable(() => import('./Login'), {
  fallback: <Loading />,
})

const LoadableMuseo = loadable(() => import('./Museo'), {
  fallback: <Loading />,
})

function App(): JSX.Element {
  return (
    <ChakraProvider resetCSS>
      <Router>
        <Switch>
          <Route exact path="/">
            <LoadableLogin />
          </Route>
          <Route exact path="/museo">
            <LoadableMuseo />
          </Route>
        </Switch>
      </Router>
    </ChakraProvider>
  )
}

export default App