import Button from "@/components/button";
import { LockOutlined } from "@mui/icons-material";
import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import Link from "next/link";

function CopyRight(props: any) {
  return (
    <Typography variant="body2" color="text.secondary" align="center">
      {"Copyright @ "}
      <a href="https://www.overdrive.co.za/" target="_blank" rel="noreferrer">
        Silicon Overdrive
      </a>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}

const ForgotPassword = () => {
  const handleResetPassword = () => {
    console.log("sent email");
  };

  return (
    <Container maxWidth={"xs"}>
      <Box
        sx={(theme) => ({
          marginTop: theme.spacing(8),
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        })}
      >
        <Avatar sx={{ mt: 5, mb: 3 }}>
          <LockOutlined />
        </Avatar>
        <Typography variant="h5">Forgotten Password</Typography>
        <Grid container spacing={2}>
          <Grid item xs={12}>
            <TextField
              variant="outlined"
              required
              fullWidth
              id="email"
              label="Email Address"
              name="email"
              autoComplete="email"
            />
          </Grid>
        </Grid>
        <Button
          fullWidth
          variant="contained"
          color="primary"
          onClick={handleResetPassword}
          sx={(theme) => ({ margin: theme.spacing(3, 0, 2) })}
        >
          Reset Password
        </Button>
        <Grid item>
          <Link href="/">{"Return to Login Page"}</Link>
        </Grid>
      </Box>
      <Box sx={{ mt: 6, mb: 4 }}>
        <CopyRight />
      </Box>
    </Container>
  );
};

export default ForgotPassword;