/* eslint-disable import/prefer-default-export */
import React from 'react';
import { BrowserRouter as Router } from "react-router-dom"
import { hot } from 'react-hot-loader'
import { SyncLoader } from 'react-spinners';
import dynamic from './dynamic';
import renderRoutes from './renderRoutes';

const Component = dynamic({ loader: () => import('../layouts/BasicLayout'), loading: SyncLoader });
const About = dynamic({ loader: () => import('../pages/About'), loading: SyncLoader });
const Home = dynamic({ loader: () => import('../pages/Home'), loading: SyncLoader })

const routes = [
  {
    "path": "/about",
    "component": About
  },
  {
    "path": "/",
    "component": Component,
    "routes": [
      {
        "path": "/",
        "redirect": "/home/index",
        "exact": true
      },
      {
        "path": "/home/index",
        "component": Home,
        "exact": true
      }
    ]
  }
];

const routers = renderRoutes(routes);

function  Routers() {
  return (
    <Router>
      {routers}
    </Router>
  );
}

export default hot(module)(Routers);