import type { Metadata } from "next";

import { NewsListing } from "@/components/news/NewsListing";
import { Editorial } from "@/components/shared/Editorial";
import { PageCta } from "@/components/shared/PageCta";
import { PageHero } from "@/components/shared/PageHero";
import { SiteFooter } from "@/components/SiteFooter";
import { SiteHeader } from "@/components/SiteHeader";
import heroImage from "@/assets/images/hero/hero-1.jpg";
import heroImageMobile from "@/assets/images/hero/hero-1-mobile.jpg";
import { newsAndBlogPage, newsListingPage } from "@/data/site";
import { getBlogs, toDisplayNewsItem } from "@/lib/api";

export const metadata: Metadata = {
  title: "اخبار",
  description: "فهرست کامل اخبار و رویدادهای منتشرشده‌ی گروه ساختمانی رئوفی.",
};

export const revalidate = 3600;

export default async function NewsListPage({
  searchParams,
}: {
  searchParams: Promise<{ page?: string }>;
}) {
  const { page: pageParam } = await searchParams;
  const page = Math.max(1, Number(pageParam) || 1);
  const posts = await getBlogs("news");
  const news = posts.map(toDisplayNewsItem);

  return (
    <>
      <SiteHeader />

      <main>
        <PageHero
          image={heroImage}
          imageMobile={heroImageMobile}
          caption={newsListingPage.hero.caption}
          title={newsListingPage.hero.title}
          breadcrumb={newsListingPage.hero.breadcrumb}
        />

        <section className="bg-paper">
          <Editorial
            caption={newsListingPage.overview.caption}
            captionLatin={newsListingPage.overview.captionLatin}
            title={newsListingPage.overview.title}
            body={newsListingPage.overview.body}
            compact
          />
        </section>

        <section className="bg-sand py-16 lg:py-24">
          <NewsListing
            items={news}
            page={page}
            basePath="/news"
            emptyMessage={newsListingPage.emptyMessage}
          />
        </section>

        <PageCta
          caption={newsAndBlogPage.cta.caption}
          title={newsAndBlogPage.cta.title}
          action={newsAndBlogPage.cta.action}
        />
      </main>

      <SiteFooter />
    </>
  );
}
