---
import { getDb } from '../../lib/db';
import { listRecent, listArchiveMonths } from '../../lib/posts';
import { CATEGORIES } from '../../lib/blog-const';
const db = getDb();
const recent = listRecent(db, 4);
const months = listArchiveMonths(db);
const monthLabel = (m: string) => new Intl.DateTimeFormat('it-IT', { month: 'long', year: 'numeric' }).format(new Date(`${m}-01`));
---
<aside class="bside">
  <h3>Categorie</h3>
  {CATEGORIES.map((c) => <p><a href={`/blog?categoria=${encodeURIComponent(c)}`}>{c}</a></p>)}
  <h3>Ultimi articoli</h3>
  {recent.map((p) => (
    <p><a href={`/blog/${p.slug}`}>{p.title}</a></p>
  ))}
  <h3>Archivio</h3>
  {months.map((m) => <p class="bside__month">{monthLabel(m.month)} ({m.count})</p>)}
</aside>

<style>
  .bside h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .16em; margin-top: 30px; }
  .bside a { text-decoration: none; color: var(--c-text); }
  .bside a:hover { color: var(--c-accent-dark); }
  .bside__month { text-transform: capitalize; }
</style>