---
import Base from '../../layouts/Base.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
import { getCollection } from 'astro:content';
import FormattedDate from '../../components/FormattedDate.astro';

const posts = (await getCollection('blog')).sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
);
---

<Base title={`Blog — ${SITE_TITLE}`} description={SITE_DESCRIPTION}>
  <div class="max-w-3xl mx-auto">
    <h1 class="text-3xl font-bold mb-6" style="color: var(--text-primary)">Blog</h1>
    {posts.length === 0 && (
      <p style="color: var(--text-4)">No posts yet.</p>
    )}
    <ul class="space-y-4">
      {posts.map(post => (
        <li>
          <a
            href={`/blog/${post.id}/`}
            class="block px-4 py-3 rounded-lg hover:bg-zinc-800 transition-colors group"
            style="background: var(--bg-card)"
          >
            {post.data.heroImage && (
              <img
                class="w-full rounded-lg mb-3 object-cover"
                style="max-height: 200px"
                src={post.data.heroImage}
                alt=""
              />
            )}
            <h2 class="text-base font-semibold group-hover:text-white transition-colors" style="color: var(--text-2)">
              {post.data.title}
            </h2>
            <p class="text-xs mt-1" style="color: var(--text-5)">
              <FormattedDate date={post.data.pubDate} />
            </p>
          </a>
        </li>
      ))}
    </ul>
  </div>
</Base>
