<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { useBlog, type BlogPost } from '../composables/useBlog';
  import { useSEO } from '../composables/useSEO';
  import { useStructuredData } from '../composables/useStructuredData';
  import { RouterLink } from 'vue-router';

  const { getPosts } = useBlog();
  const { addBreadcrumbSchema } = useStructuredData();
  const posts = ref<BlogPost[]>([]);

  // Set SEO meta tags synchronously
  useSEO({
    title: 'Blog - Latest Articles on Spritesheet Generation',
    description: 'Explore our latest articles about sprite sheet generation, game development, pixel art, and sprite animation techniques.',
    url: '/blog',
    type: 'website',
    keywords: 'sprite sheet blog, game development articles, pixel art tutorials, sprite animation',
  });

  // Add breadcrumb synchronously
  addBreadcrumbSchema([
    { name: 'Home', url: '/' },
    { name: 'Blog', url: '/blog' },
  ]);

  onMounted(async () => {
    posts.value = await getPosts();
  });
</script>

<template>
  <div class="w-full">
    <h1 class="text-4xl font-bold mb-8 text-gray-900 dark:text-white">Blog</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <article v-for="post in posts" :key="post.slug" class="glass-panel overflow-hidden hover:shadow-xl transition-all duration-300 flex flex-col h-full group border-0 ring-1 ring-gray-200 dark:ring-gray-700">
        <RouterLink :to="{ name: 'blog-detail', params: { slug: post.slug } }" class="flex flex-col h-full" :title="`Read more: ${post.title}`" :aria-label="`Read full blog post: ${post.title}`">
          <img :src="post.image" :alt="post.title" class="w-full h-48 object-cover" loading="lazy" decoding="async" />
          <div class="p-6 flex-1 flex flex-col">
            <h2 class="text-xl font-bold mb-2 text-gray-900 dark:text-white line-clamp-2">{{ post.title }}</h2>
            <p class="text-gray-600 dark:text-gray-400 text-xs mb-3">{{ post.date }}</p>
            <p class="text-gray-700 dark:text-gray-300 text-sm line-clamp-3 flex-1">{{ post.description }}</p>
          </div>
        </RouterLink>
      </article>
    </div>
  </div>
</template>
