<script lang="ts" setup>

// import

import useGetArticle from "~/composables/api/blog/useGetArticle";

// state

const route = useRoute();

const id = route.params.id as string | undefined;

const { data: article, suspense } = useGetArticle(id);

// ssr

const response = await suspense();

if (response.isError) {
    throw createError({
        statusCode: 500,
        statusMessage: `Error in categories page prefetch`
    });
}

</script>

<template>
    <div class="container">
        <div class="w-full h-[80svh] rounded-3xl relative overflow-hidden">
            <img class="absolute object-cover size-full" :alt="article!.title" :src="article!.cover_image" />
            <div class="absolute bg-linear-to-t from-black/75 to-transparent size-full" />
            <div class="absolute pl-10 right-10 bottom-10 flex flex-col gap-6">
                <h1 class="typo-h-4 text-white pl-8">
                    {{ article!.title }}
                </h1>

                <div
                    class="typo-p-lg text-slate-200 mb-6 text-justify w-[70%]"
                    v-html="article!.summery"
                />

                <div class="flex items-center justify-between">


                    <div class="flex items-center gap-4">
                        <div
                            class="w-fit pr-2 pl-5 h-[50px] rounded-full flex items-center justify-center gap-3 bg-white">
                            <div
                                class="relative flex items-center justify-center rounded-full overflow-hidden size-[35px]">
                                <img
                                    class="size-full object-cover absolute"
                                    :src="article!.author.profile_photo"
                                    alt="article-author"
                                />
                            </div>
                            <span class="typo-label-sm">
                            {{ article!.author.full_name }}
                        </span>
                        </div>
                        <div
                            class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white">
                            <span class="typo-label-sm mt-0.5">
                                دسته بندی موبایل
                             </span>
                        </div>
                    </div>


                    <div class="flex items-center gap-4">
                        <div
                            class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white">
                            <Icon name="ci:calendar" size="24px" class="**:stroke-white" />
                            <span class="typo-label-sm mt-0.5">
                                ۲۴ مهر 1403
                             </span>
                        </div>
                        <div
                            class="w-fit pr-4 pl-5 h-[50px] rounded-full flex items-center justify-center gap-2 border-[1.5px] border-white text-white">
                            <Icon name="ci:eye-open" size="24px" class="**:stroke-white" />
                            <span class="typo-label-sm mt-0.5">
                               {{ article!.views }}
                             </span>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="flex gap-4 mt-8">

            <div
                class="p-8 flex-1 text-zinc-800 flex flex-col gap-6 [&_p,ul]:text-zinc-500 [&_h1]:typo-h-4 [&_h2]:typo-h-5 [&_h3]:typo-h-6 [&_p]:typo-p-md [&_ul]:list-disc [&_ul]:typo-p-md [&_ul]:space-y-2"
                v-html="article!.content"
            />

            <aside class="mt-8 p-8 h-fit bg-slate-100 w-[400px] sticky top-4 rounded-3xl">
                asdsa
            </aside>
        </div>

    </div>
</template>