import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { setSessionExpiredCallback } from '../utils/authFetch.js';

const SessionExpiredHandler = () => {
  const [showModal, setShowModal] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    setSessionExpiredCallback(() => {
      setShowModal(true);
    });
  }, []);

  if (!showModal) return null;

  return (
    <div className="modal-overlay">
      <div className="modal">
        <h3>Session Expired</h3>
        <button
            onClick={() => {
                setShowModal(false); // clear modal before redirect
                navigate('/signin');
            }}
            >
            Go to Sign In
            </button>
      </div>
    </div>
  );
};

export default SessionExpiredHandler;