---
import Layout from '../../layouts/Layout.astro';
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.id.replace('.md', '') },
    props: { post },
  }));
}

const { post } = Astro.props;
---

<Layout title={post.data.title + ' | MoreminiMore'} description={post.data.description}>
  <article class="py-20 bg-white">
    <div class="container mx-auto px-4 max-w-4xl">
      <div class="mb-12">
        <div class="flex flex-wrap gap-2 mb-6">
          {post.data.tags.map((tag) => (
            <span class="text-sm bg-accent-blue text-white px-3 py-1 rounded-full">{tag}</span>
          ))}
        </div>
        <h1 class="text-4xl md:text-5xl font-bold mb-6 text-secondary">{post.data.title}</h1>
        <div class="flex items-center gap-6 text-gray-600">
          <span class="flex items-center gap-2">✍️ {post.data.author}</span>
          <span class="flex items-center gap-2">📅 {post.data.pubDate.toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}</span>
        </div>
      </div>

      <div class="prose prose-lg max-w-none prose-headings:text-secondary prose-a:text-accent-blue prose-img:rounded-lg">
        <post:Content />
      </div>

      <div class="mt-12 pt-8 border-t border-gray-200">
        <a href="/blog" class="text-accent-blue font-medium hover:underline flex items-center gap-2">← กลับไปหน้าบล็อก</a>
      </div>
    </div>
  </article>
</Layout>