<script lang="ts" setup>

// type

type Props = {
    articles: Article[],
}

// props

const props = defineProps<Props>();
const { articles } = toRefs(props);

// state

const isMobile = useMediaQuery('(max-width: 1024px)');

</script>

<template>
    <div class="columns-1 xs:columns-2 xl:columns-3 gap-6 sm:gap-8 w-full space-y-8">
        <BlogPost
            v-for="article in articles"
            :key="article.id"
            :image="article.cover_image"
            :description="article.summery"
            :title="article.title"
            :comments="2"
            :id="article.id"
            :date="article.created_at"
            :variant="isMobile ? 'sm' : 'lg'"
            :category="article.category"
            tag="تگ ندارد"
        />
    </div>
</template>