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-2.jpg";
import heroImageMobile from "@/assets/images/hero/hero-2-mobile.jpg";
import { blogListingPage, newsAndBlogPage } from "@/data/site";
import { getBlogs, toDisplayNewsItem } from "@/lib/api";

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

export const revalidate = 3600;

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

  return (
    <>
      <SiteHeader />

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

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

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

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

      <SiteFooter />
    </>
  );
}
