<script setup lang="ts">
const props = defineProps(['file_id'])

import { apiBase } from '~/helpers';
const headers = new Headers();
headers.append("Content-Type", "application/json");

const isOpen = ref(false)
const file_url = ref()

const file_url_data = await $fetch(`${apiBase}/tgbot/items/get_image/${props.file_id}/`, { headers })
if ((file_url_data as string[]).length > 0) {
    file_url.value = (file_url_data as string[])[0]
}
const openImage = () => {
    isOpen.value = !isOpen.value
}
</script>
<template>
    <template v-if="file_url">
        <a href="#">
            <Icon name="i-mdi-image" @click="openImage" />
        </a>
        <UModal v-model="isOpen">
            <img :src="file_url" />
        </UModal>
    </template>
</template>