import { useState, useEffect } from 'react';

const getOnlineStatus = () =>
  typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean'
    ? navigator.onLine
    : true; // Default to true if navigator is not available (e.g., SSR)

const useOnlineStatus = () => {
  const [onlineStatus, setOnlineStatus] = useState(getOnlineStatus());

  const goOnline = () => setOnlineStatus(true);
  const goOffline = () => setOnlineStatus(false);

  useEffect(() => {
    if (typeof window === 'undefined') return;

    window.addEventListener('online', goOnline);
    window.addEventListener('offline', goOffline);

    return () => {
      window.removeEventListener('online', goOnline);
      window.removeEventListener('offline', goOffline);
    };
  }, []);

  return onlineStatus;
};

export default useOnlineStatus;

/* Example Usage:
import React from 'react';
import useOnlineStatus from './useOnlineStatus';

function NetworkStatusDisplay() {
  const isOnline = useOnlineStatus();

  return (
    <div>
      <p>You are currently: {isOnline ? 'Online' : 'Offline'}</p>
      {!isOnline && <p style={{ color: 'red' }}>Please check your internet connection.</p>}
    </div>
  );
}
*/