import { useFullscreen } from '@vueuse/core';
import type { Ref } from 'vue';
import { computed, unref } from 'vue';

export function useFullScreen(el: Ref<Nullable<HTMLDivElement>>) {
  const { toggle, isFullscreen } = useFullscreen(el);

  const getFullScreenIcon = computed(() =>
    unref(isFullscreen) ? 'bx:exit-fullscreen' : 'mdi:fullscreen'
  );

  return {
    getFullScreenIcon,
    handleFullScreen: toggle,
  };
}