import {useEffect, useRef} from 'react';

export function useFullscreen() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(function () {
    function onTitleClick() {
      ref.current?.requestFullscreen();
    }

    ref.current
      ?.querySelector('.ant-card-head')
      ?.addEventListener('click', onTitleClick);

    () =>
      ref.current
        ?.querySelector('.ant-card-head')
        ?.removeEventListener('click', onTitleClick);
  });

  return ref;
}
