import { useEffect, useState } from 'react';

const useScreenDimensions = (
  isFullScreen: boolean,
  fullScreenElement: HTMLDivElement | null | undefined,
) => {
  const [containerDimensions, setContainerDimensions] = useState({
    width: 0,
    height: 0,
  });

  useEffect(() => {
    if (isFullScreen && fullScreenElement) {
      const resizeObserver = new ResizeObserver(entries => {
        for (const entry of entries) {
          const { width, height } = entry.contentRect;
          setContainerDimensions({ width, height });
        }
      });

      resizeObserver.observe(fullScreenElement);

      return () => resizeObserver.disconnect();
    }
  }, [isFullScreen, fullScreenElement]);

  return { containerDimensions };
};

export default useScreenDimensions;
