import MainProjectCard from "@/components/projects/MainProjectCard";
import useInfiniteScroll from "@/hooks/useInfiniteScroll";
import { Project, } from "@/types/types";
import React from "react";

function ModelContentProjects({ userId }: { userId: string }) {
  const { data, containerRef, isFetchingNextPage } = useInfiniteScroll({
    endpoint: `/projects/user-projects/web`,
    queryKey: ["projects", userId],
    params: { user_id: userId },
  });
  return (
    <div
      ref={containerRef}
      className="overflow-y-auto max-h-[500px] my-5 rounded-2xl p-4 gap-4 no-scrollbar"
    >
      {data?.pages.length === 0 ||
      (data?.pages[0]?.projects?.length === 0 && !isFetchingNextPage) ? (
        <p className="text-center text-gray-500">پروژه ای وجود ندارد.</p>
      ) : (
        data?.pages?.map((page, pageIndex) => (
          <React.Fragment key={pageIndex}>
            {page?.projects?.map((item: Project) => {
              return <MainProjectCard key={item._id} project={item} />;
            })}
          </React.Fragment>
        ))
      )}
    </div>
  );
}

export default ModelContentProjects;
