---
import BaseLayout from '../../layouts/BaseLayout.astro';
import ArticleCard from '../../components/article/ArticleCard.astro';
import SectionHead from '../../components/ui/SectionHead.astro';
import { getArticles, getPopular } from '../../lib/payload';

const page = Number(Astro.url.searchParams.get('page') || 1);
const [{ docs, hasPrevPage, hasNextPage }, popular] = await Promise.all([
  getArticles({ limit: 12, page }),
  getPopular(3),
]);
---

<BaseLayout
  seo={{ title: 'Articles', description: 'All articles published on SoftVowels.' }}
  current="articles"
>
  <div
    class="mx-auto grid max-w-[1440px] grid-cols-1 gap-12 px-4 pb-24 pt-12 md:px-10 lg:grid-cols-12"
  >
    <div class="lg:col-span-8">
      <SectionHead eyebrow="All articles" level={2} />
      <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
        {docs.map((a) => <ArticleCard article={a} />)}
      </div>
      <nav class="mt-12 flex items-center justify-between" aria-label="Pagination">
        {
          hasPrevPage ? (
            <a
              href={`/articles?page=${page - 1}`}
              class="border-border-subtle text-label-md hover:border-primary inline-flex h-10 items-center rounded-md border px-5 transition-colors"
            >
              ← Newer
            </a>
          ) : (
            <span />
          )
        }
        {
          hasNextPage ? (
            <a
              href={`/articles?page=${page + 1}`}
              class="border-border-subtle text-label-md hover:border-primary inline-flex h-10 items-center rounded-md border px-5 transition-colors"
            >
              Older →
            </a>
          ) : (
            <span />
          )
        }
      </nav>
    </div>
    <aside class="space-y-8 lg:col-span-4">
      <h3 class="font-label-md text-label-md text-text-tertiary m-0 uppercase tracking-widest">
        Popular this week
      </h3>
      <div class="space-y-4">
        {
          popular.map((a, i) => (
            <a
              href={`/articles/${a.slug}`}
              class="bg-surface-raised border-border-subtle hover:border-primary group block rounded-lg border p-5 transition-colors"
            >
              <span class="text-primary mb-2 block font-mono text-[10px]">
                {String(i + 1).padStart(2, '0')}
              </span>
              <h4 class="font-display group-hover:text-primary m-0 text-balance text-[18px] leading-snug transition-colors">
                {a.title}
              </h4>
            </a>
          ))
        }
      </div>
    </aside>
  </div>
</BaseLayout>