// Changelog index — every release, newest first, mounted at `/` (default
// locale) and mirrored at `/de` by src/pages/[locale]/index.tsx. Pure static
// render with no client JS (`interactive: 'none'`).
//
// `meta` is a FUNCTION of `{ locale }` so each variant's <title>/<description>
// is localised in the pre-rendered HTML. The release list itself is CONTENT
// (the .mdx files) and is NOT translated — only the chrome (page meta, the
// empty state) comes from the catalogs. Entry links are locale-prefixed via
// `withLocalePrefix` so /de stays on /de.

import type { ReactNode } from 'react'
import type { PageMeta } from '@voltro/web'
import { T, useLocale } from '@voltro/i18n'
import { releases } from '../lib/releases'
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'],
  }
}

export default function ChangelogIndex(): ReactNode {
  const locale = useLocale()
  if (releases.length === 0) {
    return (
      <p>
        <T id="empty.body" values={{ code: (chunks: ReactNode) => <code>{chunks}</code> }} />
      </p>
    )
  }
  return (
    <div>
      {releases.map((release) => (
        <article key={release.slug} className="changelog-entry">
          <p className="changelog-meta">
            <time dateTime={release.releasedAt}>{release.releasedAt}</time> · v{release.version}
            {release.tags.map((tag) => (
              <span key={tag} className="changelog-tag">{tag}</span>
            ))}
          </p>
          <h2>
            <a href={withLocalePrefix(`/${release.slug}`, locale)}>{release.title}</a>
          </h2>
          <p>{release.summary}</p>
        </article>
      ))}
    </div>
  )
}