// Blog index, mounted at `/` (default locale) and mirrored at `/de` by
// src/pages/[locale]/index.tsx. The post LIST is pure content — no
// interactivity — so it ships zero JavaScript: `interactive = 'none'` strips
// every framework <script> from the rendered HTML. The list is read from the
// same content source the [slug] pages + getStaticPaths use.
//
// `meta` is a FUNCTION of `{ locale }` — that's what localises each variant's
// <title> / <description> in the pre-rendered HTML. Post titles/excerpts are
// CONTENT (src/content/posts.ts) and are NOT translated; only the chrome
// (heading, count line, reading-time label) comes from the catalogs.

import type { ReactNode } from 'react'
import type { PageMeta } from '@voltro/web'
import { T, useLocale } from '@voltro/i18n'
import { posts } from '../content/posts'
import { getCatalog, withLocalePrefix } from '../lib/locale'

export const renderMode = 'static' as const
export const interactive = 'none' as const

export const meta = ({ locale }: { locale: string }): PageMeta => {
  const c = getCatalog(locale)
  return {
    title: c['meta.home.title'],
    description: c['meta.home.description'],
  }
}

// Newest first — sort a copy so the source array stays stable.
const byDateDesc = [...posts].sort((a, b) => b.date.localeCompare(a.date))

export default function Index(): ReactNode {
  const locale = useLocale()
  return (
    <main>
      <h1>
        <T id="home.heading" />
      </h1>
      <p className="muted">
        <T id="home.postCount" values={{ count: posts.length }} />
      </p>
      <ul className="post-list">
        {byDateDesc.map((post) => (
          <li key={post.slug}>
            <a href={withLocalePrefix(`/blog/${post.slug}`, locale)}>{post.title}</a>
            <p>
              <span className="muted">
                {post.date} · <T id="post.readingTime" values={{ minutes: post.readingMinutes }} />
              </span>
              {' — '}
              {post.excerpt}
            </p>
          </li>
        ))}
      </ul>
    </main>
  )
}