// stores/modal.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useModalStore = defineStore('modal', () => {
  const loginModalRef = ref<any>(null)
  const isModalVisible = ref(false)

  function setLoginModal(modalRef: any) {
    loginModalRef.value = modalRef
    console.log('Modal ref set:', modalRef)
  }

  function showLoginModal() {
    console.log('Showing login modal, ref:', loginModalRef.value)
    if (loginModalRef.value?.showModal) {
      loginModalRef.value.showModal()
      isModalVisible.value = true
    } else {
      console.warn('Login modal not initialized')
    }
  }

  function hideLoginModal() {
    if (loginModalRef.value?.hideModal) {
      loginModalRef.value.hideModal()
      isModalVisible.value = false
    }
  }

  return {
    loginModalRef,
    isModalVisible,
    setLoginModal,
    showLoginModal,
    hideLoginModal
  }
})