<script setup lang="ts">
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
} from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'
defineProps<{
  open: boolean
  title: string
  footerText?: string
}>()

const emit = defineEmits<{ (e: 'back'): void }>()
const goBack = () => {
  emit('back')
}
</script>

<template>
  <AlertDialog :open="open">
    <AlertDialogContent class="text-center">
      <AlertDialogHeader>
        <AlertDialogTitle class="font-normal">
          {{ title }}
        </AlertDialogTitle>
        <AlertDialogDescription>
          <slot></slot>
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter v-if="footerText">
        <Button @click="goBack"> {{ footerText }} </Button>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</template>
