import React from 'react';

import { Route } from 'react-router-dom';

import PropTypes from 'prop-types';

import Loader from '../ui/Loader';

import MainNav from '../ui/MainNav';

const DefaultLayout = ({

  // eslint-disable-next-line react/prop-types

  component: Component,

  title,

  version,

  ...rest

}) => (

  <Route

    {...rest}

    render={matchProps => (

      <div>

        <Loader />

        <div className="container">

          <h1 className="mb-5 mt-5">{ title }</h1>

          <MainNav />

          <Component {...matchProps} {...rest} />

        </div>

        <footer className="text-center text-muted small mt-3 mb-3">

          {`v. ${version} - 2017 - `}

          <a href="http://www.iri.centrepompidou.fr">IRI</a>

          {' / '}

          <a href="https://web.hypothes.is">hypothes.is</a>

        </footer>

      </div>

    )}

  />

);

DefaultLayout.propTypes = {

  title: PropTypes.string.isRequired,

  version: PropTypes.string.isRequired,

};

export default DefaultLayout;