---
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import PostCard from '../../components/PostCard.astro';
import { plural } from '../../consts';

export async function getStaticPaths() {
  const all = await getCollection('posts');
  const slugs = new Map<string, string>(); // slug -> display name
  for (const p of all) {
    p.data.categorySlugs.forEach((s, i) => {
      if (!slugs.has(s)) slugs.set(s, p.data.categories[i] ?? s);
    });
  }
  return [...slugs.entries()].map(([slug, name]) => ({
    params: { slug },
    props: { catSlug: slug, catName: name },
  }));
}

const { catSlug, catName } = Astro.props;
const all = await getCollection('posts');
const posts = all
  .filter((p) => p.data.categorySlugs.includes(catSlug))
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---

<BaseLayout title={`Категория: ${catName}`} description={`Записи в рубрике «${catName}»`}>
  <div class="cat-head">
    <h1>Категория: {catName}</h1>
    <p class="meta">
      {posts.length}&nbsp;{plural(posts.length, ['запись', 'записи', 'записей'])}
      &middot;
      <a href={`/cat/${catSlug}/feed.xml`}>RSS этой рубрики</a>
    </p>
  </div>
  <div class="post-list">
    {posts.map((p) => <PostCard post={p} />)}
    {posts.length === 0 && <p class="empty">В этой рубрике пока нет записей.</p>}
  </div>
</BaseLayout>

<style>
  .cat-head { border-bottom: 1px solid var(--rule); padding-bottom: 1rem; margin-bottom: 1rem; }
  .cat-head h1 { font-family: var(--font-serif); font-size: 1.8rem; margin: 0; }
  .cat-head .meta { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted); }
  .cat-head a { color: var(--accent); }
  .empty { color: var(--muted); margin: 1rem 0; }
</style>