<script setup lang="ts">
import { useImageViewer } from '~/stores/viewers';

const imageViewer = useImageViewer();

function onOpenUpdate(state: boolean) {
    if (!state) {
        imageViewer.close();
    }
}
</script>

<template>
    <Dialog :open="imageViewer.src != null" @update:open="onOpenUpdate">
        <DialogTrigger>
            <slot />
        </DialogTrigger>
        <DialogContent
            class="w-full overflow-hidden p-0 sm:!max-h-[90vh] sm:!max-w-[90vw]"
        >
            <img
                v-if="imageViewer.src"
                class="h-full w-full overflow-hidden !object-contain"
                :src="imageViewer.src"
            />
        </DialogContent>
    </Dialog>
</template>
