<script setup>
import DialogModal from '@/Components/DialogModal.vue'
import SecondaryButton from '@/Components/SecondaryButton.vue'

const props = defineProps({
  show: { type: Boolean, default: false },
  src: { type: String, default: '' },
  title: { type: String, default: 'Document' }
})
const emit = defineEmits(['close'])
</script>

<template>
  <DialogModal :show="props.show" @close="$emit('close')" maxWidth="4xl">
    <template #title>{{ props.title }}</template>
    <template #content>
      <div class="h-[70vh]">
        <iframe v-if="props.src" :src="props.src" class="w-full h-full rounded border" />
        <div v-else class="text-sm text-gray-500">No document to display.</div>
      </div>
    </template>
    <template #footer>
      <SecondaryButton type="button" @click="$emit('close')">Close</SecondaryButton>
    </template>
  </DialogModal>
</template>
