import dynamic from 'next/dynamic';
import AnimationLayout from './AnimationLayout';

const AppBar = dynamic(() => import('../elements/Appbar/Appbar'), {
  ssr: false,
});
const BasicFooter = dynamic(() => import('../elements/Footer/BasicFooter'), {
  ssr: false,
});

const AppLayout = ({ children, title, withFooter = true }) => {
  return (
    <div className='flex flex-col min-h-screen max-h-screen overflow-y-auto'>
      <AppBar title={title} />
      <div className='flex-grow p-4'>{children}</div>
      {withFooter && (
        <div className='mt-auto'>
          <BasicFooter />
        </div>
      )}
    </div>
  );
};

export default AppLayout;
