import React from "react";
import SwiperComponent from "@/modules/home/components/new-arrivals/swiper-component";
import ViewAll from "@/modules/ui/view-all";
import categoryService from "@/lib/services/category";
import { ProductResponse } from "@/lib/types/models";

export default async function Page() {
  const response: ProductResponse =
    await categoryService.fetchProductByCategory("newArrivals=true&limit=10");
  const data = response.success ? response?.data : [];

  if (data.length === 0) return null;

  return (
    <div className="bg-[linear-gradient(256.85deg,#FFE6DD_0.51%,rgba(231,230,255,0.71)_100%)] my-[20px]">
      <div className="main-container py-[40px] relative">
        <h2 className="mobile-container text-[20px] lg:text-[32px] leading-[25.2px] lg:leading-[42.84px] text-neutral-black-87 mb-[20px] md:mb-[36px] font-semibold">
          New Arrivals{" "}
        </h2>
        <SwiperComponent data={data} />
        <ViewAll title="View all new arrivals" link="/all-products" />
      </div>
    </div>
  );
}