import React from 'react';
import { useLocation } from 'react-router';
import { useTranslation } from 'react-i18next';
import classNames from 'classnames';
import { P } from '@spglobal/react-components';

import { Header } from '@components/Header/Header';
import styles from './Layout.scss';

export const Layout: React.FC = props => {
  const location = useLocation();
  const { t } = useTranslation(['main']);

  return (
    <div className={classNames('spg-layout', styles['spg-layout'])}>
      <div className="spg-layout__header">
        <Header />
      </div>
      <div className={classNames('spg-layout__body', styles['spg-layout__body'])}>
        <div className="spg-layout__main">
          <header className={classNames('spg-layout__content', styles['spg-layout__page-header'])}>
            <div className="spg-container-fixed@xxl">
              <div className="spg-row">
                <div className="spg-col">
                  <div className="spg-container">
                    <div className="spg-row spg-justify-center">
                      <div className="spg-col spg-col-6@md spg-col-6@xl">
                        My new MFE {location.pathname.slice(1)}!
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </header>

          <main className="spg-layout__content">
            <div className="spg-container-fixed@xxl spg-mt-xl">
              <div className="spg-row spg-mb-lg">
                <div className="spg-col">{props.children}</div>
              </div>
            </div>
          </main>
          <footer className={styles['spg-layout__footer']}>
            <P className="spg-text-large spg-text-secondary">{t('main:copyright')}</P>
          </footer>
        </div>
      </div>
    </div>
  );
};