"use client";
import React, { useEffect } from "react";
import { useRouter } from "next/navigation";
import { getCookie } from "@/utils/cookie";
import LoginCard from "@/components/LoginCard";
import Image from "next/image";
import { TextGenerateEffect } from "@/components/ui/TextGenerateEffect";

const Page = () => {
  const router = useRouter();

  useEffect(() => {
    const authToken = getCookie("authToken");

    if (authToken) {
      router.push("/dashboard");
    }
  }, [router]);

  return (
    <div className="flex flex-col lg:flex-row justify-center items-center min-h-screen pt-16 pb-16 overflow-auto">
      {/* Left Column: Image (Hidden on mobile) */}
      <div className="hidden lg:flex justify-end items-end">
        <div className="flex flex-col lg:items-end lg:justify-end items-center justify-center">
          <div className="mb-8">
            <TextGenerateEffect
              className="text-4xl text-center"
              words="It's for those who rise above the ordinary"
            />
          </div>
          <Image
            src="/img/home.png"
            width={600}
            height={400}
            alt="Picture"
            className="object-contain w-1/2 lg:w-full max-w-[550px] h-auto"
          />
        </div>
      </div>
      {/* Right Column: Text Content */}
      <div className="flex justify-start items-start 2xl:justify-center lg:w-1/2 p-4">
        <LoginCard />
      </div>
    </div>
  );
};

export default Page;