import { Link } from "react-router-dom";
import { Project } from "../Types/goTypes";

/**
 * The props for the ProjectsProps component
 */
interface ProjectProps {
  projects: Project[];
}

/**
 * A list of projects for users, that links the user to the right project page
 * thanks to the state property
 * @param props - The projects to display
 * @returns {JSX.Element} The project list
 * @example
 * const projects = [{ id: 1, name: "Random name" }];
 * return <ProjectList projects={projects} />;
 */

export function ProjectListUser(props: ProjectProps): JSX.Element {
  return (
    <div>
      <ul className="font-bold underline text-[30px] cursor-pointer">
        {props.projects.map((project) => (
          <Link to="/project" key={project.id} state={project.name}>
            <li className="pt-5" key={project.id}>
              {project.name}
            </li>
          </Link>
        ))}
      </ul>
    </div>
  );
}