import React from "react";

const TimeoutModal = (props) => {
    const { showModal, handleStayLoggedIn, remainingCountdown } = props;

    return (
        <div
            className={showModal ? "modal fade show" : "modal fade"}
            style={{
                display: showModal ? "flex" : "none",
            }}
        >
            {/* <div backdrop="static" className="modal-dialog"> */}
            <div className="modal-dialog">
                <div className="modal-content">
                    <h3>
                        Your session is about to expire in {remainingCountdown}{" "}
                        seconds due to inactivity. You will be redirected to the
                        login page.
                    </h3>
                    <button
                        className="govuk-button"
                        onClick={handleStayLoggedIn}
                    >
                        Stay Logged In
                    </button>
                </div>
            </div>
            <div className="modal-backdrop fade show"></div>
        </div>
    );
};

export default TimeoutModal;