<script lang="ts" setup>

// import

import useGetArticles from "~/composables/api/blog/useGetArticles";
import ArticlesList from "~/components/articles/ArticlesList.vue";

// state

useSeoMeta({
    title : "مقالات"
});

const page = ref(1);
const search = ref("");
const debouncedSearch = refDebounced(search, 700);

const { data: articles, suspense } = useGetArticles(page, debouncedSearch);

// ssr

const response = await suspense();

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

</script>

<template>
    <div class="container" style="margin-top: 80px">
        <div class="flex items-center justify-between mb-20">
            <span class="typo-h-4 text-black">
                مقالات اخیر سایت
            </span>
            <Input
                class="max-w-[400px] w-full rounded-full"
                variant="outlined"
                placeholder="جستجو..."
                v-model="search"
            >
                <template #endItem>
                    <div class="flex items-center gap-1">
                        <Icon
                            class="translate-y-[-1px]"
                            name="ci:search"
                            size="24"
                        />
                    </div>
                </template>
            </Input>
        </div>

        <!-- This is for masonry js package -->


        <ArticlesList :articles="articles!.results" />


        <div class="w-full flex-center pt-24 pb-10">
            <Pagination :items="[]" :total="100" />
        </div>
    </div>
</template>