<script setup lang="ts">
import type { BlogCardType } from "~/types/blogCard";

const props = defineProps<{
  relatedBlogs: BlogCardType[];
}>();
</script>

<template>
  <section
    id="related-blogs"
    class="bg-gradient-even py-section px-4 max-2xl:flex max-2xl:flex-col max-2xl:justify-center"
  >
    <div class="pb-section container mx-auto">
      <BlogsTitle :title="$t('relatedBlogs.title')" title-heading="h3" />
      <Spacer />
      <div
        class="container mx-auto grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3"
      >
        <BlogsBlogCard
          v-for="blog in props.relatedBlogs"
          :id="blog.id"
          :key="blog.id"
          :slug="blog.slug"
          :title="blog.title"
          :tag="blog.tag"
          :description="blog.description"
          :image="blog.image"
        />
      </div>
    </div>
    <SubscribeSection />
  </section>
</template>
