<script setup lang="ts">
// state

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

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

// ssr

await suspense();
</script>

<template>
    <section class="container">
        <div class="flex items-center justify-between mb-12 md:mb-20">
            <span class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4 text-black"> مقالات اخیر سایت </span>
            <NuxtLink to="/articles">
                <Button
                    variant="primary"
                    class="rounded-full max-md:h-[38px] max-md:text-xs"
                    end-icon="ci:arrow-left"
                >
                    نمایش همه
                </Button>
            </NuxtLink>
        </div>
        <ArticlesList :articles="articles!.results" />
    </section>
</template>
