function NewTimeReport(): JSX.Element {
  const activities = [
    "Development",
    "Meeting",
    "Administration",
    "Own Work",
    "Studies",
    "Testing",
  ];

  return (
    <>
      <div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
        <input
          className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
          type="week"
          placeholder="Week"
          onKeyDown={(event) => {
            event.preventDefault();
          }}
          onPaste={(event) => {
            event.preventDefault();
          }}
        />
        <table className="w-full text-center divide-y divide-x divide-white text-[30px]">
          <thead>
            <tr>
              <th className="w-1/2 py-2 border-b-2 border-black">Activity</th>
              <th className="w-1/2 py-2 border-b-2 border-black">
                Total Time (min)
              </th>
            </tr>
          </thead>
          <tbody className="divide-y divide-black">
            {activities.map((activity, index) => (
              <tr key={index} className="h-[10vh]">
                <td>{activity}</td>
                <td>
                  <input
                    type="number"
                    min="0"
                    className="border-2 border-black rounded-md text-center w-1/2"
                    onKeyDown={(event) => {
                      const keyValue = event.key;
                      if (!/\d/.test(keyValue) && keyValue !== "Backspace")
                        event.preventDefault();
                    }}
                  />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

export default NewTimeReport;