import React from "react";
import categoryService from "@/lib/services/category";
import { ProductResponse } from "@/lib/types/models/product";
import SwiperComponent from "./swiper-component";

export default async function Page({
  id,
  parentId,
}: {
  id: string;
  parentId: string;
}) {
  const response: ProductResponse =
    await categoryService.fetchProductByCategory(
      `categoryId=${parentId}&limit=10`
    );
  const data = response.success ? response?.data?.filter((res) => res?._id !== id) : [];
  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">
        Similar Products
      </h2>
      <SwiperComponent data={data} id={id} />
    </div>
  );
}