import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { routes } from 'app/common/routes';
import { TopNavigation } from 'app/modules/navigation/components/topNavigation';
import { DocumentsPoolPage } from 'app/modules/documents/pages/documentsPool.page';
import { POOL_SECTION } from 'app/modules/pools/store';
import { SubHeader } from 'app/shared/components/topBar/subHeader';

const DocumentsPage = () =>
  <div className="o-page-layout o-page-layout--sticky-header o-page-layout--aside">
    <header className="o-page-layout__header">
      <TopNavigation section={POOL_SECTION.DOCUMENTS}/>
    </header>
    <main className="o-page-layout__content o-page-layout__content--no-sub-header">
      <SubHeader
        headline="Documents"
        line1="In this page you will find all the relevant documents about your vessel and the management of the pool."
        line2="Download or bookmark important documents and find what you need by filtering the list."
      />
      <Switch>
        <Route path={routes.documentsPoolRoute} component={DocumentsPoolPage}/>
      </Switch>
    </main>
  </div>;

export default DocumentsPage;