<script setup lang="ts">
import { computed } from 'vue'
import FdsButtonSecondary from '../Buttons/FdsButtonSecondary/FdsButtonSecondary.vue'
import FdsModal from '../FdsModal/FdsModal.vue'
import type { FdsExitModalProps } from './types'

const props = defineProps<FdsExitModalProps>()

const isOpen = computed(() => props.showExitConfirmModal.value)
</script>

<template>
  <FdsModal :heading="props.heading" size="sm" :open="isOpen" info="warning" @close="props.cancelExit">
    <div>{{ props.text }}</div>
    <template #modal-footer>
      <div class="flex justify-between gap-6 w-full">
        <FdsButtonSecondary :text="props.stayText" @click="props.cancelExit" block />
        <FdsButtonSecondary :text="props.leaveText" @click="props.confirmExit" block />
      </div>
    </template>
  </FdsModal>
</template>
