<script setup lang="ts">
import { watch } from 'vue';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';

const open = defineModel<boolean>('open', { default: false });

const emit = defineEmits<{
    close: [];
}>();

defineProps<{
    url: string | null;
    title?: string;
}>();

watch(open, (val) => {
    if (!val) {
        emit('close');
    }
});
</script>

<template>
    <Dialog v-model:open="open">
        <DialogContent class="sm:max-wd p-2 sm:p-4">
            <DialogHeader class="sr-only">
                <DialogTitle>{{ title ?? 'Pratinjau Gambar' }}</DialogTitle>
            </DialogHeader>
            <img v-if="url" :src="url" :alt="title ?? 'Pratinjau gambar'"
                class="max-h-[80vh] w-full rounded-md object-contain">
        </DialogContent>
    </Dialog>
</template>
