import React, { HTMLProps, useEffect } from "react";
import classNames from "classnames"
import { Box, BoxProps, Breadcrumbs, BreadcrumbsProps, Container, Typography } from "@material-ui/core";
import "@/styles/page.scss"

export type PageProps = {
    title?: string;
} & BoxProps;

export type PageHeaderProps = {
    maxWidth?: "sm" | "md" | "lg" | "xl" | false
} & HTMLProps<HTMLDivElement>

export const Page = ({ title, children, ...props }: PageProps) => {
    useEffect(() => {
        document.title = title ? title + " | Praktyka Studencka" : "Praktyka Studencka";
    }, [ title ])

    return <Box {...props} className={ classNames("page", props.className) } component="main">
        { children }
    </Box>
}

Page.Header = ({ children, maxWidth = undefined, ...props }: PageHeaderProps) =>
    <section {...props} className={classNames("page__header", props.className)}>
        <Container maxWidth={ maxWidth }>
            { children }
        </Container>
    </section>

Page.Title = ({ children }: HTMLProps<any>) => <Typography variant="h2" className="page__title">{ children }</Typography>

Page.Breadcrumbs = ({ children, ...props }: BreadcrumbsProps) => <Breadcrumbs { ...props}>{ children }</Breadcrumbs>