<template>
    <div class="message-image-container" @click="previewImage()">
        <img class="message-image-content" draggable="false" :src="imageContent.url" @load="meidaMessageOnload()" />
    </div>
</template>

<script setup lang="ts">
interface MessageImageContent {
    url: string
}

interface MessageImageProps {
    imageContent: MessageImageContent
    previewImage: () => void
    meidaMessageOnload: () => void
}

defineProps<MessageImageProps>()
</script>

<style scoped>
.message-image-container {
    overflow: hidden;
}

.message-image-content {
    max-width: min(calc(100vw - 180px), 400px);
    max-height: min(calc(100vw - 180px), 400px);
    width: inherit;
    height: inherit;
}
</style>