import React from "react";
import { useProjects } from "../../hooks/useProjects";
import Loader from "../common/Loader";
import ProjectCard from "./ProjectCard";
import Pagination from "../common/Pagination";

const ProjectCardView = ({ data, currentPage, totalPages, paginate }) => {
  return (
    <div className="row page-min-h">
      {data?.length === 0 && (
        <p className="text-center text-muted">No projects found.</p>
      )}

      {data?.map((project) => (
        <ProjectCard key={project.id} project={project} />
      ))}

      <div className="col-12 d-flex justify-content-start mt-3">
        <Pagination
          currentPage={currentPage}
          totalPages={totalPages}
          onPageChange={paginate}
        />
      </div>
    </div>
  );
};

export default ProjectCardView;