import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";

export default function PhotoHover({ image, alt, open, setOpen }) {
  const handleClose = () => setOpen(false);
  const openFullImage = () => window.open(image);
  return (
    <Modal
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
      open={open}
      onClose={handleClose}
      closeAfterTransition
    >
      <Fade in={open} timeout={500}>
        <img
          src={image}
          alt={alt}
          style={{ maxHeight: "90%", maxWidth: "90%", outline: "none" }}
          onClick={openFullImage}
        />
      </Fade>
    </Modal>
  );
}
