import { ref } from 'vue'

const modalRef = ref<HTMLElement | null>(null)
const showDetails = ref<boolean>(false)
const title = ref<string>('')
const content = ref<string>('')
const contentSlot = ref<any>(null)
export const useModal = () => {
  const openDetailsModal = (data: Record<string, any>) => {
    const { titleString, contentString, contentSlot: slot } = data
    showDetails.value = true
    title.value = titleString
    content.value = contentString
    contentSlot.value = slot
  }

  const closeDetailsModal = () => {
    showDetails.value = false
  }

  return {
    modalRef,
    showDetails,
    title,
    content,
    contentSlot,
    openDetailsModal,
    closeDetailsModal,
  }
}
