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

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

defineProps<{
    url: string | null;
    title?: string;
}>();
</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>
