---
import { getCollection, render, type CollectionEntry } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import BlogHeader from '../../components/BlogHeader.astro';
import SiteFooter from '../../components/SiteFooter.astro';
import '../../styles/blog.css';

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

interface Props { post: CollectionEntry<'blog'> }
const { post } = Astro.props;
const { Content } = await render(post);
const canonical = new URL(`/blog/${post.id}/`, 'https://moreminimore.com').toString();
const image = new URL(post.data.heroImage, 'https://moreminimore.com').toString();
const formatDate = (date: Date) => new Intl.DateTimeFormat('th-TH', { day: 'numeric', month: 'long', year: 'numeric' }).format(date);
const structuredData = [
  {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    '@id': `${canonical}#blogposting`,
    headline: post.data.title,
    description: post.data.description,
    image,
    datePublished: post.data.pubDate.toISOString(),
    ...(post.data.updatedDate ? { dateModified: post.data.updatedDate.toISOString() } : {}),
    mainEntityOfPage: canonical,
    publisher: { '@id': 'https://moreminimore.com/#organization' },
  },
  {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    '@id': `${canonical}#breadcrumb`,
    itemListElement: [
      { '@type': 'ListItem', position: 1, name: 'หน้าหลัก', item: 'https://moreminimore.com/' },
      { '@type': 'ListItem', position: 2, name: 'บทความ', item: 'https://moreminimore.com/blog/' },
      { '@type': 'ListItem', position: 3, name: post.data.title, item: canonical },
    ],
  },
];
---

<BaseLayout
  title={`${post.data.title} | MoreminiMore`}
  description={post.data.description}
  ogType="article"
  image={post.data.heroImage}
  imageAlt={`ภาพประกอบบทความ ${post.data.title}`}
  publishedTime={post.data.pubDate.toISOString()}
  updatedTime={post.data.updatedDate?.toISOString()}
  structuredData={structuredData}
>
  <BlogHeader current="blog" />
  <main id="content" class="article-page">
    <article>
      <header class="article-header">
        <a class="article-back" href="/blog/">← บทความทั้งหมด</a>
        <div class="article-meta"><span>{post.data.category}</span><time datetime={post.data.pubDate.toISOString()}>{formatDate(post.data.pubDate)}</time>{post.data.updatedDate && <span>อัปเดต {formatDate(post.data.updatedDate)}</span>}</div>
        <h1>{post.data.title}</h1>
        <p>{post.data.description}</p>
      </header>
      <figure class="article-hero"><img src={post.data.heroImage} alt={`ภาพประกอบบทความ ${post.data.title}`} width="1200" height="630" fetchpriority="high" /></figure>
      <div class="article-prose"><Content /></div>
      <footer class="article-end"><p>อ่านจบแล้ว อยากดูมุมมองอื่นต่อไหม?</p><a href="/blog/">ดูบทความทั้งหมด ↗</a></footer>
    </article>
  </main>
  <SiteFooter />
</BaseLayout>
