import { listPosts } from "@cms/db"
import Link from "next/link"

export const dynamic = "force-dynamic"

export default async function PublicNewsIndexPage() {
  const posts = await listPosts()

  return (
    <section className="mx-auto w-full max-w-4xl space-y-4 px-6 py-16">
      <header className="space-y-2">
        <p className="text-sm uppercase tracking-[0.2em] text-neutral-500">News</p>
        <h1 className="text-4xl font-semibold tracking-tight">Latest updates</h1>
      </header>

      <div className="space-y-3">
        {posts.map((post) => (
          <article key={post.id} className="rounded-lg border border-neutral-200 p-4">
            <p className="text-xs uppercase tracking-wide text-neutral-500">{post.status}</p>
            <h2 className="mt-1 text-lg font-medium">{post.title}</h2>
            <p className="mt-2 text-sm text-neutral-600">{post.excerpt ?? "No excerpt"}</p>
            <Link
              href={`/news/${post.slug}`}
              className="mt-2 inline-block text-sm underline underline-offset-2"
            >
              Read post
            </Link>
          </article>
        ))}
      </div>
    </section>
  )
}