import { ArticleCard } from "@/components/article-card";
import { getPublishedArticles } from "@/lib/data";
import { siteMetadata } from "@/lib/seo";

export const dynamic = "force-dynamic";
export const metadata = siteMetadata({ title: "Latest News", path: "/latest" });

export default async function LatestPage() {
  const articles = await getPublishedArticles(24);
  return (
    <section className="px-4 py-12 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-7xl">
        <p className="font-display text-xs font-bold uppercase tracking-[.28em] text-cyanx">Live Desk</p>
        <h1 className="mt-3 font-display text-4xl font-black text-white">Latest News</h1>
        <div className="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {articles.map((article) => <ArticleCard key={article.id} article={article} />)}
        </div>
      </div>
    </section>
  );
}