import fetchData from "@/api/fetch-data";
import AlertWarning from "@/app/ui/shared/AlertWarning";
import LightBlueBlogCard from "@/app/ui/shared/LightBlueBlogCard/LightBlueBlogCard";
import { getLocale, getTranslations } from "next-intl/server";
import CustomBreadcrumb from "../../ui/shared/CustomBreadcrumb";
import BlogCardRedesignTwo from "@/app/ui/shared/BlogCardRedesignTwo/BlogCardRedesignTwo";

/**
 * @author: Ahmed Badran
 * Created At: 24-10-2024
 *
 * Renders the Articles component with a navigation header, a grid of article cards,
 * and pagination controls.
 *
 * @remarks
 * The component uses the CustomBreadcrumb and BlogCard components to display a navigation
 * header and individual article cards, respectively. It also uses the Pagination
 * component to provide pagination controls for navigating through the articles.
 *
 * The component displays article cards in a responsive grid layout, with different
 * configurations for small, medium, and large screens. The articles data is imported
 * from the blogs module and mapped over to generate individual BlogCard components.
 *
 * Pagination controls include previous and next buttons, as well as numbered page links.
 * The pagination is displayed in a left-to-right direction, with styling to indicate
 * the active page.
 */
export default async function Articles({ params }) {
  const { id } = params;
  const locale = await getLocale(); // Retrieve the current locale
  const t = await getTranslations(); // Retrieve the current locale
  const res = await fetchData({
    endPoint: `/articles-categories/${id}`,
    locale,
  });
  const { data, error, message, status } = res;

  // Error handling
  if (error || data?.error) {
    const errorMessage =
      error?.message || data?.message || "An unexpected error occurred.";
    return <AlertWarning text={errorMessage} />;
  }
  if (data?.length == 0) return <AlertWarning text={t("nodata")} />;
  return (
    <>
      {/* Navigation Header */}
      <CustomBreadcrumb subs={true} />

      {/* Article Cards */}
      <section
        className="container mt-4 lg:mt-8 mb-12 grid gap-4 grid-cols-1 md:grid-cols-2
            lg:grid-cols-3
            lg:gap-8 2xl:grid-cols-4"
      >
        {status === "success"
          ? data[0]?.artciles?.map((item, i) => (
            <div key={i}>
              <LightBlueBlogCard blog={item} />
              {/* <BlogCardRedesignTwo blog={item} /> */}
            </div>
          ))
          : ""}
      </section>
    </>
  );
}
