import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

import routes from "./routes";
import withTracker from "./withTracker";

import "bootstrap/dist/css/bootstrap.min.css";
import "./shards-dashboard/styles/shards-dashboards.1.1.0.min.css";

import { DefaultLayout } from "./layouts";

// This acts as the 404 Error route component.
const NoMatch = () => {
  return <DefaultLayout>
  <p>Nothing found</p>
  </DefaultLayout>
}

export default () => (
  <Router basename={process.env.REACT_APP_BASENAME || ""}>
    <div>
      {routes.map((route, index) => {
        return (
          <Route
            key={index}
            path={route.path}
            exact={route.exact}
            component={withTracker(props => {
              return (
                <route.layout {...props}>
                  <route.component {...props} />
                </route.layout>
              );
            })}
          />
        );
      })}
      <Route component={NoMatch} />       {/* Make sure to register it at the bottom */}
    </div>
  </Router>
);