import { Footer } from "@/components/Footer";
import { Header } from "@/components/Header";
import { PageHero } from "@/components/PageShared";
import { ArticlesGrid } from "@/components/ArticlesGrid";
import { Pagination } from "@/components/Pagination";
import { DEFAULT_LIST_PAGE_SIZE, listBlogs } from "@/lib/meshkee";
import type { Metadata } from "next";
import { pageMetadata } from "@/lib/seo";

export const metadata: Metadata = pageMetadata({
  title: "مقالات",
  description: "مقالات و دانشنامه تخصصی شرکت رسام تجارت هواران",
  path: "/articles",
});

type PageProps = {
  searchParams: Promise<{ page?: string }>;
};

export default async function ArticlesPage({ searchParams }: PageProps) {
  const params = await searchParams;
  const page = Math.max(1, Number.parseInt(params.page || "1", 10) || 1);
  const pageSize = DEFAULT_LIST_PAGE_SIZE;
  const { items, total } = await listBlogs({
    page,
    pageSize,
    type: "blog",
  });

  return (
    <>
      <Header />
      <main>
        <PageHero
          title="مقالات"
          titleEn="ARTICLES"
          breadcrumb={[
            { label: "صفحه اصلی", href: "/" },
            { label: "مقالات", href: "/articles" },
          ]}
        />

        <section className="section">
          <div className="container-page">
            <div className="mb-8 flex justify-center border-b border-[#eee] pb-3">
              <span className="border-b border-[#232323] px-3 pb-2 text-sm font-semibold text-[#232323]">
                همه
              </span>
            </div>
            <ArticlesGrid items={items} />
            <Pagination
              basePath="/articles"
              page={page}
              pageSize={pageSize}
              total={total}
            />
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}
