import { onBeforeUnmount, onMounted } from 'vue'

type FancyboxModule = typeof import('@fancyapps/ui')

export function useFancybox(selector: string) {
  let fancybox: FancyboxModule['Fancybox'] | null = null

  onMounted(async () => {
    const module = await import('@fancyapps/ui')
    fancybox = module.Fancybox
    fancybox.bind(selector, {})
  })

  onBeforeUnmount(() => {
    fancybox?.destroy()
  })
}