import { useState } from "react";
import { NewProject } from "../Types/goTypes";
import ProjectInfoModal from "./ProjectInfoModal";

/**
 * A list of projects for admin manage projects page, that sets an onClick
 * function for eact project <li> element, which displays a modul with
 * user info.
 * @param props - An array of projects to display
 * @returns {JSX.Element} The project list
 * @example
 * const projects: NewProject[] = [{ name: "Project", description: "New" }];
 * return <ProjectListAdmin projects={projects} />
 */

export function ProjectListAdmin(props: {
  projects: NewProject[];
}): JSX.Element {
  const [modalVisible, setModalVisible] = useState(false);
  const [projectname, setProjectname] = useState("");

  const handleClick = (username: string): void => {
    setProjectname(username);
    setModalVisible(true);
  };

  const handleClose = (): void => {
    setProjectname("");
    setModalVisible(false);
  };

  return (
    <>
      <ProjectInfoModal
        onClose={handleClose}
        isVisible={modalVisible}
        projectname={projectname}
      />
      <div>
        <ul className="font-bold underline text-[30px] cursor-pointer padding">
          {props.projects.map((project) => (
            <li
              className="pt-5"
              key={project.name}
              onClick={() => {
                handleClick(project.name);
              }}
            >
              {project.name}
            </li>
          ))}
        </ul>
      </div>
    </>
  );
}
