import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import LoginForm from "./LoginForm";
import Logo from "../Logo";
import { Box } from "@mui/material";

const LoginPage = () => {
  return (
    <Grid container height="100vh">
      <Grid item sm sx={{ backgroundColor: 'neutral.900'}}>
      </Grid>
      <Grid item xs={12} sm={8} lg={5}>
        <Paper square sx={{ height: "100%" }}>
          <Box sx={{ width: '100%', padding: 5, paddingBlockStart: 10, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', svg: { maxHeight: 120 } }}>
            <Logo />
          </Box>
          <LoginForm />
        </Paper>
      </Grid>
    </Grid>
  );
};

export default LoginPage;
