import MainWindow from "./MainWindow";
import { TemplateProps } from "helper/types";
import { useMediaQuery } from "hooks/useMediaQuery";
import {motion} from "framer-motion"
// @ts-ignore
const Template = ({children, 
   useWindow = false,
    mainWindowClassNames = "middle window",
    mainWindowBig = true,
    center = false,
    mainWindowFullWidth = false,
  mainWindow = true}:TemplateProps) => {
    const isSmall = useMediaQuery({maxWidth: "1380px"})
    
        return (
        <div className="grid place-items-center">
         
            {useWindow === false ? children : null}
          {useWindow === true ? <motion.div layoutId="window"  data-full-width={mainWindowFullWidth} data-large={mainWindowBig} className={`${isSmall ? `grid place-items-center` : ""} ${mainWindowClassNames}`}>
        {mainWindow ? <MainWindow center={center} >
          {children}
        </MainWindow> : children}
          </motion.div> : null}
          
          
        </div>
    );
}

export default Template;