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

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

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

  return (
    <div className="main-container py-[20px] 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">
        Popular Products
      </h2>
      <SwiperComponent data={data} />
      <ViewAll title="View all popular products" link="/all-products" />
    </div>
  );
}