---
import PageShell from '../../components/PageShell.astro';

import { getCollection, render } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog', ({ data }) => !data.draft);

  return posts.map((post) => ({
    params: { slug: post.id },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } = await render(post);
const formattedDate = new Intl.DateTimeFormat('th-TH', {
  dateStyle: 'long',
}).format(post.data.pubDate);
---

<PageShell title={`${post.data.title} | MoreminiMore`} description={post.data.description}>
  <article class="blog-article">
    <header class="blog-article-hero scene scene-light" data-scene="light">
      <div class="blog-article-heading">
        <a class="blog-back-link" href="/blog/">← บทความทั้งหมด</a>
        <div class="blog-article-meta">
          <span class="eyebrow eyebrow-yellow">{post.data.category}</span>
          <span class="eyebrow">{formattedDate}</span>
        </div>
        <h1>{post.data.title}</h1>
        <p class="blog-article-lead">{post.data.description}</p>
      </div>
    </header>

    <div class="blog-feature-image">
      {['ai-for-sme-start-with-pain', 'marketing-automation-reduce-work', 'sme-website-next-action'].includes(post.id) ? (
        <img src={`/images/blog-${post.id === 'ai-for-sme-start-with-pain' ? 'ai' : post.id === 'marketing-automation-reduce-work' ? 'automation' : 'website'}.jpg`} alt={post.data.title} />
      ) : (
        <img src="/images/blog-marketing.jpg" alt={post.data.title} />
      )}
    </div>

    <div class="blog-article-shell">
      <div class="blog-prose">
        <Content />
      </div>
    </div>
  </article>
</PageShell>

<style>
  .blog-article-hero { padding-bottom: clamp(36px, 5vw, 64px); }

  .blog-feature-image {
    max-width: var(--container);
    margin: 2rem auto 1rem;
    padding: 0 1rem;
  }

  .blog-feature-image img {
    width: 100%;
    border-radius: 20px;
    display: block;
  }
</style>
