import React, { FC, ReactNode } from 'react';
import Layout from '../../components/Layout';
import Banner, { BannerProps } from '../../components/Banner';
import Content from '../../components/Content';

import BackToPage, { BackToProps } from '../../components/BackToPage';

export interface PageProps {
  title?: string;
  BannerProps?: BannerProps;
  children?: ReactNode;
  BackToProps?: BackToProps;
}

const Page: FC<PageProps> = ({ title, children, BannerProps, BackToProps }) => {
  return (
    <Layout>
      {!title && BannerProps && <Banner {...BannerProps} />}

      {title && (
        <Content noPaddingBottom>
          <h1>{title}</h1>
        </Content>
      )}

      {BackToProps && BackToProps.show && <BackToPage {...BackToProps} />}
      {children}
    </Layout>
  );
};

export default Page;