<template>
    <div class="">
        <!-- Profile Header -->
        <div v-if="user.user" class="shadow rounded-lg overflow-hidden">
            <!-- Banner Image -->
            <img class="h-40 object-cover w-full" :src="useRuntimeConfig().public.MediaUrl + user.get_image">
            <!-- Profile Image and Info -->
            <div class="p-2">
                <div class="flex items-center">
                    <!-- Profile Image -->
                    <div class="relative">
                        <img :src="useRuntimeConfig().public.MediaUrl + user.user.get_image"
                            class="size-20 rounded-full -mt-16 border-4 border-white dark:border-zinc-950 object-cover">
                    </div>
                    <div class="mr-2">
                        <div class="flex">
                            <h1 class="text-sm font-bold dark:text-white">{{ user.user.get_title }}</h1>
                            <!-- check -->
                            <div v-if="user.user.title_check > 0" class="mr-1" :class="{
                                'text-yellow-400': user.title_check == 1, 'text-blue-400': user.title_check == 2, 'text-blue-800': user.title_check == 3
                            }">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    class="size-5">
                                    <path fill-rule="evenodd"
                                        d="M16.403 12.652a3 3 0 0 0 0-5.304 3 3 0 0 0-3.75-3.751 3 3 0 0 0-5.305 0 3 3 0 0 0-3.751 3.75 3 3 0 0 0 0 5.305 3 3 0 0 0 3.75 3.751 3 3 0 0 0 5.305 0 3 3 0 0 0 3.751-3.75Zm-2.546-4.46a.75.75 0 0 0-1.214-.883l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                                        clip-rule="evenodd" />
                                </svg>
                            </div>
                        </div>
                        <p class="text-zinc-600 text-xs dark:text-zinc-400">{{ user.user.abstract }}</p>
                    </div>
                </div>
                <!-- User Bio -->
                <p class="mt-4 text-zinc-700 dark:text-zinc-200">{{ user.get_about }}</p>
                <!-- User Stats -->
                <div class="mt-4 flex space-x-2">
                    <div>
                        <span class="dark:text-white">{{ toPersianNumbers(user.followers_count)
                        }}</span>
                        <span class="text-zinc-600 dark:text-zinc-400 mr-1">دنبال‌کننده</span>
                    </div>
                    <div>
                        <span class="dark:text-white">{{ toPersianNumbers(user.activities_count)
                        }}</span>
                        <span class="text-zinc-600 dark:text-zinc-400 mr-1">فعالیت در مقاله</span>
                    </div>
                </div>
            </div>
        </div>
        <UserActivities />
        <MaghaleFooter />
    </div>
</template>

<script setup>
import axios from 'axios';
import { useMaghaleStore } from '~/store'
const { $toPersianNumbers } = useNuxtApp();
const store = useMaghaleStore()
const toPersianNumbers = $toPersianNumbers;
const id = useRoute().params.id
axios.defaults.headers.common.Authorization = store.token
// get user
const user = ref({})
function getUser() {
    let url = useRuntimeConfig().public.BaseUrl
    store.isAuthenticated ? url = url + 'maghale/get_user_by_user/' : url = url + 'maghale/get_user/'
    axios
        .get(url + id)
        .then((r) => {
            user.value = r.data
            store.setUser(r.data)
        })
}
// init
getUser()
useSeoMeta({
  title: user.get_title,
  ogTitle: user.get_title,
  image: user.get_image,
  ogImage: user.get_image,
  ogImageUrl: user.get_image,
  description: user.abstract,
  ogDescription: user.abstract,
});
</script>