<template>
    <div class="message-location-container" @click="openLocationPage">
        <span class="message-location-description">{{ locationContent.description }}</span>
        <img class="message-location-image" :src="locationContent.url" alt="location" />
    </div>
</template>

<script setup lang="ts">
interface MessageLocationContent {
    href: string
    url: string
    description: string
}

interface MessageLocationProps {
    locationContent: MessageLocationContent
}

const props = defineProps<MessageLocationProps>()

const openLocationPage = () => {
    window.open(props.locationContent.href, '_blank')
}
</script>

<style scoped>
.message-location-container {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.message-location-description {
    margin-bottom: 8px;
}

.message-location-image {
    display: block;
    max-width: 100%;
}
</style>