---
import { getCollection, render } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';
import { formatDateRu } from '../lib/extract';

export async function getStaticPaths() {
  const [posts, pages] = await Promise.all([
    getCollection('posts'),
    getCollection('pages'),
  ]);
  const out: { params: { slug: string }; props: { kind: 'post' | 'page'; entry: any } }[] = [];
  for (const p of posts) {
    out.push({ params: { slug: p.data.slug }, props: { kind: 'post', entry: p } });
  }
  for (const p of pages) {
    if (p.data.slug === 'forum') continue;
    out.push({ params: { slug: p.data.slug }, props: { kind: 'page', entry: p } });
  }
  return out;
}

const { kind, entry } = Astro.props;
const { Content } = await render(entry);
---

<BaseLayout title={entry.data.title} description={entry.data.description ?? ''}>
  <article class="article">
    <header class="article-head">
      <h1>{entry.data.title}</h1>
      {kind === 'post' && entry.data.pubDate && (
        <div class="meta">
          <time datetime={entry.data.pubDate.toISOString()}>
            <span class="date-mark">●</span> {formatDateRu(entry.data.pubDate)}
          </time>
          {entry.data.categories?.filter((_: string, i: number) => entry.data.categorySlugs?.[i] !== 'main').length > 0 && (
            <span class="cats">
              {entry.data.categories.map((c: string, i: number) => {
                const slug = entry.data.categorySlugs?.[i] ?? c;
                if (slug === 'main') return null;
                return (
                  <>
                    <a href={`/cat/${slug}/`}>{c}</a>
                  </>
                );
              })}
            </span>
          )}
        </div>
      )}
    </header>
    <div class="prose">
      <Content />
    </div>
    {kind === 'post' && (
      <footer class="article-foot">
        <a class="back" href="/">← К списку записей</a>
      </footer>
    )}
  </article>
</BaseLayout>

<style>
  .article { max-width: var(--reading-max); }
  .article-head {
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
  }
  .article-head h1 {
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight: 700;
    margin: 0 0 0.4rem;
    line-height: 1.15;
  }
  .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: baseline;
    font-size: 0.85rem;
    color: var(--muted);
  }
  .date-mark { color: var(--accent); margin-right: 0.2rem; }
  .cats a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted var(--rule-strong); }
  .cats a:hover { color: var(--accent); }
  .sep { color: var(--rule-strong); margin: 0 0.2rem; }
  .article-foot {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
  }
  .back { font-family: var(--font-sans); font-size: 0.92rem; color: var(--accent); text-decoration: none; }
  .back:hover { color: var(--accent-soft); }
</style>
