inactivy tyling and time out time

components/timeoutmodal.js

@@ -1,22 +1,18 @@
 import React from "react";
+import { useState, useEffect } from "react";
+
+const TimeoutModal = (props) => {
+    const { showModal, handleStayLoggedIn, remainingCountdown } = props;
 
-const TimeoutModal = ({ showModal, togglePopup, handleStayLoggedIn }) => {
     return (
-        <div className="modal">
-            <div
-                isOpen={showModal}
-                toggle={togglePopup}
-                keyboard={false}
-                backdrop="static"
-                className="modal-dialog"
-            >
+        <div className={showModal == false ? "modal fade" : "modal fade show"}>
+            <div backdrop="static" className="modal-dialog">
                 <div className="modal-content">
-                    <h1>
-                        {" "}
-                        timeout - Your session is about to expire in 5 seconds
-                        due to inactivity. You will be redirected to the login
-                        page.
-                    </h1>
+                    <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}