<script setup lang="ts">
import Modal from '@/components/utilities/Modal.vue'
import { ref, watch } from 'vue'

const props = defineProps({
  confirmHeader: {
    type: String,
    default: 'Are you sure?'
  },
  confirmFunction: {
    type: Function
  },
  cancelFunction: {
    type: Function
  },
  cancelButtonText: {
    type: String,
    default: 'Cancel'
  },
  confirmButtonText: {
    type: String,
    default: 'Confirm'
  },
  modalOpened: {
    type: Boolean,
    default: false
  }
})

watch(
  () => props.modalOpened,
  (val) => {
    modalOpened.value = val
  }
)

const modalOpened = ref(props.modalOpened)
</script>

<template>
  <Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="300" :modal-height="190">
    <template #modalHeader>
      <div class="text-white">
        <slot name="modalHeader"></slot>
      </div>
    </template>
    <template #modalBody>
      <div class="text-white h-full">
        <div class="flex h-full flex-col justify-between">
          <span class="p-2">
            <slot name="modalBody"></slot>
          </span>
          <div class="flex justify-between p-2">
            <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="props.cancelFunction()">
              {{ props.cancelButtonText }}
            </button>

            <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" type="submit" @click="props.confirmFunction()">
              {{ props.confirmButtonText }}
            </button>
          </div>
        </div>
      </div>
    </template>
  </Modal>
</template>
