import { motion } from 'framer-motion';
import React, { FC } from 'react';
import styled from 'styled-components';

import SpaceToolbar from './SpaceToolbar';

const variants = {
  initial: { opacity: 0 },
  enter: { opacity: 1, transition: { duration: 0.1 } },
  exit: {
    opacity: 0,
    transition: { duration: 0.2 },
  },
};

const Content = styled(motion.main)`
  flex-grow: 1;
  padding: ${({ theme }) => theme.spacing(3)}px;
  position: relative;
`;
const Page: FC = ({ children, ...props }) => {
  return (
    <Content
      initial="initial"
      animate="enter"
      exit="exit"
      variants={variants}
      {...props}
    >
      <SpaceToolbar />
      {children}
    </Content>
  );
};

export default Page;