import BasicWindow from "../../Components/BasicWindow";
import BackButton from "../../Components/BackButton";
import { useParams, Link } from "react-router-dom";
import AllTimeReportsInProject from "../../Components/AllTimeReportsInProject";
import Button from "../../Components/Button";

function UserViewTimeReportsPage(): JSX.Element {
  const { projectName } = useParams();

  const content = (
    <>
      <h1 className="font-bold text-[30px] mb-[20px]">
        Your Time Reports In: {projectName}
      </h1>
      <AllTimeReportsInProject />
    </>
  );

  const buttons = (
    <>
      <Link to={`/viewStatistics/${projectName}`}>
        <Button
          text="Total Time In Project"
          onClick={(): void => {
            return;
          }}
          type={"button"}
        />
      </Link>
      <BackButton />
    </>
  );

  return <BasicWindow content={content} buttons={buttons} />;
}
export default UserViewTimeReportsPage;