import styles from "styles/window/MainWindow.module.css"
import { MainWindowProps } from "helper/types";
import { useMediaQuery } from "hooks/useMediaQuery";
const MainWindow = ({
children, width = "95%", 
paddingTop = "1.25rem", paddingBottom = "1.25rem",
paddingLeft = "1.5rem", paddingRight = "1.5rem",
center = false,
textCenter = false}:MainWindowProps) => {
    const isTiny = useMediaQuery({maxWidth: "500px"})
    if(isTiny) {
        paddingTop = "1rem"
        paddingBottom = "1rem"
        paddingLeft = "0.5rem"
        paddingRight = "0.5rem"
        width = "100%"
    }
    return (
        <div className={styles.wrapper}
        style={{width}}>
        <div className={styles.inner} style={{
            paddingTop, paddingBottom,
            paddingLeft, paddingRight,
            textAlign: textCenter ? "center" : "initial",
            ...(center ? {
                display: "grid",
                placeItems: "center"
            } : {})
        }}>
        {children}
        </div>
        </div>
    )
}

export default MainWindow