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
        xs={12}
        md={6}
        sx={{
          backgroundColor: "neutral.000",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexGrow: 1,
        }}
      >
        <Box
          sx={{
            width: "100%",
            padding: 5,
            paddingBlockStart: 10,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            svg: { maxHeight: 120 },
          }}
        >
          <Logo />
        </Box>
      </Grid>
      <Grid item xs={12} md={6} sx={{ height: { md: "100%" }, flexGrow: 1 }}>
        <Paper
          square
          sx={{
            height: "100%",
            width: "100%",
            padding: { lg: 5, md: 3 },
            display: "flex",
            alignItems: "center",
          }}
        >
          <LoginForm sx={{ flex: 1 }} />
        </Paper>
      </Grid>
    </Grid>
  );
};

export default LoginPage;
