<script setup>
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/Components/ui/dialog'
import { Button } from '@/Components/ui/button'

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

<template>
  <Dialog :open="show" @update:open="(open) => !open && $emit('close')">
    <DialogContent class="max-w-4xl">
      <DialogHeader>
        <DialogTitle>{{ props.title }}</DialogTitle>
      </DialogHeader>
      <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">Ni dokumenta za prikaz.</div>
      </div>
      <div class="flex justify-end mt-4">
        <Button type="button" variant="outline" @click="$emit('close')">Zapri</Button>
      </div>
    </DialogContent>
  </Dialog>
</template>
