text: import * as React from "react";
  import Avatar from "@mui/material/Avatar";
  import Button from "@mui/material/Button";
  import CssBaseline from "@mui/material/CssBaseline";
  import TextField from "@mui/material/TextField";
  // import FormControlLabel from "@mui/material/FormControlLabel";
  // import Checkbox from "@mui/material/Checkbox";
  import { Link as Mlink } from "@mui/material";
  import Grid from "@mui/material/Grid";
  import Box from "@mui/material/Box";
  import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
  import Typography from "@mui/material/Typography";
  import Container from "@mui/material/Container";
  import { createTheme, ThemeProvider } from "@mui/material/styles";
  import { useState } from "react";
  import { useMutation } from "@apollo/client";
  import { ADD_USER } from "../utils/mutations";
  import Auth from "../utils/auth";
  // import Boom from "../images/boom.jpeg";
  // import Spines from "../images/collectionSpines.jpeg";
  // import Halo from "../images/collectionHalo.jpeg";
  // import Thor from "../images/thor.jpeg";
  // import Parker from "../images/parker.jpeg";
  
  function Copyright(props) {
    return (
      <Typography
        variant="body2"
        color="text.secondary"
        align="center"
        {...props}
      >
        {"Copyright © "}
        <Mlink color="inherit" href="https://github.com/jbramirez03/Comic-Space">
          Comic Space
        </Mlink>{" "}
        {new Date().getFullYear()}
        {"."}
      </Typography>
    );
  }
  
  const theme = createTheme();
  
  export default function SignUp() {
    const [userFormData, setUserFormData] = useState({
      firstName: "",
      lastName: "",
      email: "",
      password: "",
    });
  
    const handleInputChange = (event) => {
      const { name, value } = event.target;
      setUserFormData({ ...userFormData, [name]: value });
    };
  
    const [addUser] = useMutation(ADD_USER);
  
    const handleFormSubmit = async (event) => {
      event.preventDefault();
      try {
        const { data } = await addUser({
          variables: { ...userFormData },
        });
  
        Auth.login(data.addUser.token);
      } catch (err) {
        console.error(err);
      }
  
      setUserFormData({
        firstName: "",
        lastName: "",
        email: "",
        password: "",
      });
    };
  
    // const handleSubmit = (event) => {
    //   event.preventDefault();
    //   const data = new FormData(event.currentTarget);
    //   // eslint-disable-next-line no-console
    //   console.log({
    //     email: data.get("email"),
    //     password: data.get("password"),
    //   });
    // };
  
    return (
      <ThemeProvider theme={theme}>
        <Container component="main" maxWidth="xs">
          <CssBaseline />
          <Box
            sx={{
              marginTop: 8,
              backgroundColor: "white",
              border: "2px solid #531c28",
              borderRadius: "8px",
              padding: "15px",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
            }}
          >
            <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
              <LockOutlinedIcon />
            </Avatar>
            <Typography component="h1" variant="h5">
              Sign up
            </Typography>
            <Box
              component="form"
              noValidate
              onSubmit={handleFormSubmit}
              sx={{ mt: 3 }}
            >
              <Grid container spacing={2}>
                <Grid item xs={12} sm={6}>
                  <TextField
                    autoComplete="given-name"
                    name="firstName"
                    color="warning"
                    required
                    fullWidth
                    id="firstName"
                    label="First Name"
                    value={userFormData.firstName}
                    onChange={handleInputChange}
                    autoFocus
                  />
                </Grid>
                <Grid item xs={12} sm={6}>
                  <TextField
                    required
                    fullWidth
                    id="lastName"
                    label="Last Name"
                    name="lastName"
                    color="warning"
                    value={userFormData.lastName}
                    onChange={handleInputChange}
                    autoComplete="family-name"
                  />
                </Grid>
                <Grid item xs={12}>
                  <TextField
                    required
                    fullWidth
                    id="email"
                    label="Email Address"
                    name="email"
                    color="warning"
                    value={userFormData.email}
                    onChange={handleInputChange}
                    autoComplete="email"
                  />
                </Grid>
                <Grid item xs={12}>
                  <TextField
                    required
                    fullWidth
                    name="password"
                    label="Password"
                    type="password"
                    id="password"
                    color="warning"
                    value={userFormData.password}
                    onChange={handleInputChange}
                    autoComplete="new-password"
                  />
                </Grid>
              </Grid>
              <Button
                type="submit"
                fullWidth
                variant="contained"
                sx={{ mt: 3, mb: 2 }}
              >
                Sign Up
              </Button>
              <Grid container justifyContent="flex-end">
                <Grid item>
  
                  <Mlink href="#/login" variant='body2'>
                    Already have an account? Sign in
                  </Mlink>
                </Grid>
              </Grid>
            </Box>
          </Box>
          <Copyright sx={{ mt: 5 }} />
        </Container>
      </ThemeProvider>
    );
  }
  