useVisibility.ts

import { useState, useEffect } from 'react';

type VisibilityState = 'visible' | 'hidden';

export const usePageVisibility = (): VisibilityState => {
  const [visibilityState, setVisibilityState] = useState<VisibilityState>(
    document.visibilityState as VisibilityState
  );

  useEffect(() => {
    const handleVisibilityChange = () => {
      setVisibilityState(document.visibilityState as VisibilityState);
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, []);

  return visibilityState;
};