import { Box, chakra, Flex } from "@chakra-ui/react";
import { isValidMotionProp, motion } from "framer-motion";
import type { ReactNode } from "react";

import Footer from "./Footer";
import Header from "./Header";
import Meta from "./Meta";

type LayoutProps = {
  children: ReactNode;
};

const ContentContainer = chakra(motion.main, {
  shouldForwardProp: (prop) => isValidMotionProp(prop) || prop === "children",
});

const Layout = ({ children }: LayoutProps) => {
  return (
    <Box margin="0 auto" maxWidth={800} transition="0.5s ease-out">
      <Meta />
      <Flex wrap="wrap" margin="8" minHeight="90vh">
        <Header />
        <ContentContainer
          transition={{ type: "tween", ease: "circOut" }}
          animate={{ y: 0, opacity: 1 }}
          initial={{ y: 100, opacity: 0 }}
          width="full"
          marginY={22}
        >
          {children}
        </ContentContainer>
        <Footer />
      </Flex>
    </Box>
  );
};

export default Layout;
