import { PropsWithChildren, ReactElement } from 'react';
import { Stack, Toolbar, Typography, Link } from '@mui/material';
import Topbar from './Topbar';
import Footer from './Footer';

const PublicLayout = ({ children }: PropsWithChildren): ReactElement => {
  return (
    <>
      <Stack minHeight="100vh" bgcolor="background.default">
        <Topbar />
        <Toolbar
          sx={{
            pt: 12,
            width: 1,
            pb: 0,
            alignItems: 'start',
            flex: '1 0 auto',
          }}
        >
          {children}
        </Toolbar>
        <Stack direction="row" justifyContent={{ xs: 'center' }} my={3.75}>
          <Typography variant="subtitle2" fontFamily={'Poppins'} color="text.primary">
            <Link
              href="https://ditchtheagent.com/"
              target="_blank"
              rel="noopener"
              sx={{ color: 'background.paper', '&:hover': { color: 'secondary.main' } }}
            >
              Ditch The Agent
            </Link>
          </Typography>
        </Stack>
      </Stack>
      {/*<Footer />*/}
    </>
  );
};

export default PublicLayout;
