"use client";
import { TextLink } from "@/app/components/button";
import { useRouter } from "next/navigation";
import AuthBanner from "@/app/components/banner/authbanner";
import LoginForm from "@/app/components/auth/loginForm";
import { Suspense } from "react";

export default function Login() {
  const router = useRouter();

  return (
    <>
      <div className="mob-noise relative">
        <AuthBanner />
        <div className="wrapper relative z-10">
          <div className="mx-auto flex flex-col w-full md:w-[40%] py-20">
            <div className="flex flex-col">
              <div className="flex justify-between">
                <button
                  id="btn_login_back"
                  type="button"
                  className="btn-text-link"
                  onClick={router.back}
                >
                  Go back
                </button>
                <div className="text-sm text-gray-950">
                  New to Morni?{" "}
                  <TextLink
                    id="adasd-100"
                    href="/auth/signup"
                    label="Sign up"
                    color="gray"
                  />
                </div>
              </div>
            </div>
            <div className="mt-10 flex flex-1 justify-between align-middle">
              <h1>Log in</h1>
            </div>
            <Suspense>
              <LoginForm />
            </Suspense>

            <div className="mt-8">
              <TextLink
                id="adasd345"
                href="/auth/forgotpassword"
                label="Forgot password?"
                color="gray"
              />
            </div>
          </div>
        </div>
      </div>
    </>
  );
}