<script setup lang="ts">
const warrenStore = useWarrenStore();

function onOpenUpdate(state: boolean) {
    if (!state) {
        warrenStore.imageViewer.src = null;
    }
}
</script>

<template>
    <Dialog
        :open="warrenStore.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="warrenStore.imageViewer.src"
                class="h-full w-full overflow-hidden !object-contain"
                :src="warrenStore.imageViewer.src"
            />
        </DialogContent>
    </Dialog>
</template>
