<script setup lang="ts">
import { computed } from 'vue';
import { Link } from '@inertiajs/vue3';
import { route } from 'ziggy-js';

const props = defineProps<{
    message: {
        id: number;
        user: { id: number; name: string } | null;
        content: string;
        created_at: string;
        media?: Array<{
            id: number;
            url: string;
            file_name: string;
            mime_type: string;
        }>;
    };
}>();

const processedContent = computed(() => {
    return props.message.content.replace(/<user:(\d+)>/g, (match, userId) => {
        // This is a placeholder for a more robust user lookup
        return `<a href="${route('users.show', userId)}" class="text-blue-500 hover:underline">@user${userId}</a>`;
    });
});
</script>

<template>
    <div v-html="processedContent"></div>
</template>
