import React, { FC } from 'react';
import PathCrumbs from "../../components/PathCrumbs";
import Viewport from "../../components/ViewPort";
import styles from './default.module.scss';
import clsx from 'clsx';
import Typ from '../../components/Typ';
import Box from '../../components/Box';

export type DefaultPageProps = {
    className?: string;
    path?: string;
    lastUpdated?: string;
    children?: React.ReactChild;
};

const LastUpdatedDate : FC<{ children: React.ReactNode }> = ({children}) => (
    <span style={{ whiteSpace: 'nowrap', padding: '4px 0px' }} >Last Updated: {children}</span>
)

const DefaultPage : FC<DefaultPageProps> = ({className, lastUpdated, children, path, ...props}) => (
  <Viewport
      className={clsx(styles.viewportOverrides, className)}
      my={3}
  >
    <Box
      style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap' }}
      el='header'
      my={1}
    >
      {path !== undefined ? <PathCrumbs style={{ padding: '4px 0px' }} path={path!} /> : undefined}
      {lastUpdated ? <LastUpdatedDate>{lastUpdated}</LastUpdatedDate> : undefined}
    </Box>
    <main>
      {children}
    </main>
  </Viewport>
);

export default DefaultPage;