import Button from "../Components/Button";
import Logo from "/src/assets/TTIMElogo.png";
import "./LoginPage.css";
import { useEffect } from "react";
import { Link } from "react-router-dom";

const PreloadBackgroundAnimation = (): JSX.Element => {
  useEffect(() => {
    const images = [
      "src/assets/1.jpg",
      "src/assets/2.jpg",
      "src/assets/3.jpg",
      "src/assets/4.jpg",
    ];

    // Pre-load images
    for (const i of images) {
      console.log(i);
    }

    // Start animation
    document.body.style.animation = "backgroundTransition 30s infinite";
  }, []);

  return <></>;
};

function LoginPage(): JSX.Element {
  return (
    <>
      <PreloadBackgroundAnimation />
      <div
        className="flex flex-col h-screen w-screen items-center justify-center"
        style={{
          animation: "backgroundTransition 30s infinite",
          backgroundSize: "cover",
          backgroundAttachment: "fixed",
        }}
      >
        <div className="border-4 border-black bg-white flex flex-col items-center justify-center h-fit w-fit rounded-3xl content-center pl-20 pr-20">
          <img
            src={Logo}
            className="logo w-[7vw] mb-10 mt-10"
            alt="TTIME Logo"
          />
          <h1 className="font-sans mb-4 font-bold text-[25px]">
            {" "}
            Welcome to TTIME!{" "}
          </h1>
          <h2 className="font-sans mb-4 text-[15px]">
            {" "}
            Please log in to continue{" "}
          </h2>
          <input
            className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
            type="text"
            placeholder="Username"
          />
          <input
            className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
            type="password"
            placeholder="Password"
          />
          <Link to="/your-projects">
            <Button
              text="Login"
              onClick={(): void => {
                return;
              }}
            />
          </Link>
        </div>
      </div>
    </>
  );
}

export default LoginPage;