import { useRouter } from "next/router";
import { Typography } from "@mui/material";
import { Box } from "@mui/system";
import Button from "@mui/material/Button";
import LogoutIcon from "@mui/icons-material/Logout";
import { deleteCookie } from "cookies-next";

export default function Logout() {
  const router = useRouter();
  const handleLogout = () => {
    // Remove the cookie
    deleteCookie("cmc-token");

    // Use replaceState to replace the current URL with the root URL
    window.history.replaceState({}, document.title, window.location.href);

    // Redirect to the login page
    router.push("/auth/login");
  };
  return (
    <>
      <div className="authenticationBox">
        <Box
          component="main"
          sx={{
            padding: "70px 0 100px",
          }}
        >
          <Box
            sx={{
              background: "#fff",
              padding: "30px 20px",
              borderRadius: "10px",
              maxWidth: "510px",
              ml: "auto",
              mr: "auto",
              textAlign: "center",
            }}
            className="bg-black"
          >
            <Box>
              <img
                src="/images/logos/wrenchboard-logo.png"
                alt="Logo"
                className="black-logo"
              />

              <img
                src="/images/logos/wrenchboard-logo.png"
                alt="Logo"
                className="white-logo"
              />
            </Box>

            <Box mt={4} mb={4}>
              <LogoutIcon />
            </Box>

            <Typography as="h1" fontSize="20px" fontWeight="500" mb={1}>
              Would you like to sign out?
            </Typography>

            <Button
              onClick={handleLogout}
              fullWidth
              variant="contained"
              sx={{
                mt: 3,
                backgroundColor: "#4687BA",
                textTransform: "capitalize",
                borderRadius: "8px",
                fontWeight: "500",
                fontSize: "16px",
                padding: "12px 10px",
                color: "#fff !important",
                "&:hover": {
                  backgroundColor: "rgba(70, 135, 186, 0.8)",
                },
              }}
            >
              Sign Out
            </Button>
          </Box>
        </Box>
      </div>
    </>
  );
}