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

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

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

      {totalPages > 1 && (
        <nav>
          <ul className="pagination pagination-sm justify-content-end py-2">
            <li className={`page-item ${currentPage === 1 && "disabled"}`}>
              <button
                className="page-link"
                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
              >
                &laquo;
              </button>
            </li>
            {[...Array(totalPages)].map((_, i) => (
              <li
                key={i}
                className={`page-item ${currentPage === i + 1 && "active"}`}
              >
                <button
                  className="page-link"
                  onClick={() => setCurrentPage(i + 1)}
                >
                  {i + 1}
                </button>
              </li>
            ))}
            <li
              className={`page-item ${
                currentPage === totalPages && "disabled"
              }`}
            >
              <button
                className="page-link"
                onClick={() =>
                  setCurrentPage((p) => Math.min(totalPages, p + 1))
                }
              >
                &raquo;
              </button>
            </li>
          </ul>
        </nav>
      )}
    </div>
  );
};

export default ProjectCardView;