<template>
    <div>
        <div class="flex justify-between gap-x-2">
            <MaghaleFirstTitle v-if="activity.data.title" :title="activity.data.title" />
            <img v-if="activity.data.get_image" :src="useRuntimeConfig().public.MediaUrl + activity.data.get_image" alt=""
                class="size-24 object-cover rounded-lg">
        </div>
        <p class="mt-4 text-xs font-normal text-zinc-700 dark:text-zinc-200">
            {{ activity.data.abstract }}
        </p>
        <UserProfile v-if="activity.data.user" :user="activity.data.user" class="mt-4" />
    </div>
</template>

<script setup>
import axios from 'axios'
import { useMaghaleStore } from '~/store'
const store = useMaghaleStore()
const id = store.activity.id
// get activity
const activity = reactive({ data: {} })
async function getActivity() {
    let url = useRuntimeConfig().public.BaseUrl + 'maghale/'
    store.isAuthenticated ? url = url + 'get_activity_by_user/' : url = url + 'get_activity/'
    await axios.get(url + id)
        .then((r) => {
            activity.data = r.data
        })
}
// init
getActivity()
</script>