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={0}
        sm={4}
        md={5}
        lg={6}
        sx={{
          display: { xs: "none", sm: "block" },
          backgroundColor: "#c5e58b",
          minHeight: { xs: 0, sm: "100vh" },
        }}
      >
        <Box
          sx={{
            width: "100%",
            height: "100%",
            minHeight: { sm: "100vh" },
            backgroundImage: "url('logo/HomepageLogo.png')",
            backgroundRepeat: "no-repeat",
            backgroundPosition: "center",
            backgroundSize: "contain",
            maxWidth: 960,
            margin: "0 auto",
          }}
        />
      </Grid>
      <Grid item xs={12} sm={8} md={7} lg={6}>
        <Box
          sx={{
            width: "100%",
            padding: 5,
            paddingBlockStart: 10,
            display: "flex",
            alignItems: "flex-end",
            justifyContent: "center",
            backgroundImage: "linear-gradient(135deg, rgba(59,130,246,0.15) 0%, #f1f5f9 45%, #f8fafc 100%)",
            backgroundColor: "#f8fafc",
          }}
        >
          <Logo height={42} />
        </Box>
        <Paper square sx={{ height: "100%" }}>
          <LoginForm />
        </Paper>
      </Grid>
    </Grid>
  );
};

export default LoginPage;