import React from "react";
import { Redirect, Route, Switch } from "react-router-dom";

import "./styles/App.scss";

import pagesObject from "./pagesConfig";
import HeaderContainer from "./components/Component/HeaderContainer";

/**
 * @function Main
 * @description Functional Presentation component for Main
 * @returns {React.Component} - Rendered component.
 */
const Main = props => {
  const { location } = props;
  return (
    <div>
      <HeaderContainer pagesObject={pagesObject} />
      <div className="fixedTop switch pt-3">
        <Switch location={location}>
          {pagesObject.pages.map(tab => {
            if (tab.component) {
              return (
                <Route
                  exact
                  key={tab.path}
                  path={`/${tab.path}`}
                  component={tab.component}
                />
              );
            }
            return null;
          })}
          <Redirect to={pagesObject.pages[pagesObject.default].path} />
        </Switch>
      </div>
      <footer className="d-flex justify-content-end mr-2">
        <span className="d-inline d-sm-none">XS</span>
        <span className="d-none d-sm-inline d-md-none">SM</span>
        <span className="d-none d-md-inline d-lg-none">MD</span>
        <span className="d-none d-lg-inline d-xl-none">LG</span>
        <span className="d-none d-xl-inline d-xxl-none">XL</span>
        <span className="d-none d-xxl-inline">XXL</span>
      </footer>
    </div>
  );
};

export default Main;