<script setup lang="ts">
import Dialog from 'primevue/dialog'

interface Props {
  visible: boolean
  header?: string
  modal?: boolean
  closable?: boolean
  draggable?: boolean
  maximizable?: boolean
  style?: Record<string, string>
}

withDefaults(defineProps<Props>(), {
  modal: true,
  closable: true,
  draggable: false,
  maximizable: false
})

defineEmits<{
  'update:visible': [value: boolean]
}>()
</script>

<template>
  <Dialog
    :visible="visible"
    :header="header"
    :modal="modal"
    :closable="closable"
    :draggable="draggable"
    :maximizable="maximizable"
    :style="style"
    @update:visible="$emit('update:visible', $event)"
  >
    <template v-if="$slots.header" #header>
      <slot name="header" />
    </template>
    <slot />
    <template v-if="$slots.footer" #footer>
      <slot name="footer" />
    </template>
  </Dialog>
</template>
