import { Link, useParams } from "react-router-dom";
import { JSX } from "react/jsx-runtime";

function PMProjectMenu(): JSX.Element {
  const { projectName } = useParams();
  return (
    <>
      <h1 className="font-bold text-[30px] mb-[20px]">{projectName}</h1>
      <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[5vh] p-[30px]">
        <Link to={`/timeReports/${projectName}/`}>
          <h1 className="font-bold underline text-[30px] cursor-pointer">
            Your Time Reports
          </h1>
        </Link>
        <Link to={`/newTimeReport/${projectName}`}>
          <h1 className="font-bold underline text-[30px] cursor-pointer">
            New Time Report
          </h1>
        </Link>
        <Link to={`/projectMembers/${projectName}`}>
          <h1 className="font-bold underline text-[30px] cursor-pointer">
            Statistics
          </h1>
        </Link>
        <Link to={`/unsignedReports/${projectName}`}>
          <h1 className="font-bold underline text-[30px] cursor-pointer">
            Unsigned Time Reports
          </h1>
        </Link>
      </div>
    </>
  );
}
export default PMProjectMenu;