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


const ForecastPage = () =>
  <div className="o-page-layout o-page-layout--sticky-header o-page-layout--aside">
    <header className="o-page-layout__header">
      <TopNavigation section={POOL_SECTION.FORECAST}/>
    </header>
    <main className="o-page-layout__content o-page-layout__content--no-sub-header">
      <SubHeader
        headline="Forecast"
        hasPrintButton
      />
      <Switch>
        <Route path={routes.forecastPoolRoute} component={ForecastPoolPage}/>
      </Switch>
    </main>
  </div>;

export { ForecastPage };
