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';

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

const LastUpdatedDate : FC<{ children: React.ReactNode }> = ({children}) => (
    <span className={styles.date}><b>Last Updated: </b>{children}</span>
)

const DefaultPage : FC<DefaultPageProps> = ({className, lastUpdated, children, path, ...props}) => (
    <Viewport
        className={clsx(styles.viewportOverrides, className)}
    >
        {path !== undefined ? <PathCrumbs path={path!} /> : undefined}
        {lastUpdated ? <LastUpdatedDate>{lastUpdated}</LastUpdatedDate> : undefined}
        {children}
    </Viewport>
);

export default DefaultPage;