import { useState, useEffect } from "react";
import Row from "react-bootstrap/Row";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";

function PatchNotes() {
  const [ShowModal, setShowModal] = useState(false);

  const handleCloseModal = () => setShowModal(false);
  const handleShowModal = () => setShowModal(true);

  return (
    <div className="bottomPosition">
      <Row className="mt-2 d-flex justify-content-center">
        <section className="col-lg-auto">
          <Button className="leagueColor" onClick={handleShowModal}>
            Game Details
          </Button>
        </section>
      </Row>
      {/* Modal */}
      <Modal
        centered
        size="lg"
        show={ShowModal}
        onHide={handleCloseModal}
        scrollable
      >
        <Modal.Header closeButton>
          <Modal.Title>
            <p className="text-center">Game Details</p>
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p>Doubla.exe not found, RIP 🪦</p>
          <p>
            Report Doubla for fucking up the website & not carring the game as
            caitlyn which is his job as an adc main.
          </p>
        </Modal.Body>
      </Modal>
    </div>
  );
}

export default PatchNotes;

CSS
.bottomPosition {
  position: absolute;
  bottom: -500px;
}