import fetchData from "@/api/fetch-data";
import AlertWarning from "@/app/ui/shared/AlertWarning";
import CustomBreadcrumb from "@/app/ui/shared/CustomBreadcrumb";
import FallbackImage from "@/app/ui/shared/FallbackImage";
import { getLocale, getTranslations } from "next-intl/server";
import Link from "next/link";
export default async function Page({ params }) {
  const o = await getTranslations("offers");
  const locale = await getLocale();
  let offers = [];
  const response = await fetchData({
    endPoint: `/offers/category/${params.id}`, locale
  });
  if (!response?.error) {
    if (response?.status == "success") {
      offers = response?.data?.offers;
    }
  }
  return (
    <>
      <CustomBreadcrumb subs={true} />
      <div className="container my-6">

        <div className="grid grid-cols-12 gap-6">
          {offers.length > 0 ?
            offers?.map((item, index) => (
              <div key={index} className="3xl:col-span-3 md:col-span-4 col-span-12">
                <Link href={`/offers/products/${item?.id}`} className="block bg-white md:p-4 p-8 space-y-4 hover:shadow-lg hover:scale-[1.02] transition-all duration-300">
                  {/* image */}
                  <div className="relative h-52">
                    <FallbackImage
                      src={item?.image}
                      alt={locale == "en" ? item?.title.en : item?.title.ar||"image"}
                      fill
                      className="object-cover"
                    />
                  </div>
                  <h2 className="text-center font-semibold text-2xl">{locale == "en" ? item?.title.en : item?.title.ar}</h2>
                </Link>
              </div>
            )) :
            <AlertWarning text={o("noOffers")} />
          }
        </div>
      </div>
    </>
  );
}