import { Box, Card, Grid } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import LoginForm from './LoginForm';
import { useStyles } from './loginStyles';

function Login() {
  const theme = useTheme();
  const classes = useStyles();

  return (
    <Box className={classes.root}>
      <Card className={classes.card}>
        <Grid container>
          <Grid item xs={12}>
            <img
              src={theme.logo}
              alt="College Logo"
              className={classes.defaultLogo}
            />
            <LoginForm />
          </Grid>
        </Grid>
      </Card>
    </Box>
  );
}

export default Login;
