import { Link } from "@/i18n/routing";
import ForgotPass from "@/components/partials/auth/forgot-pass";
import Image from "next/image";

const ForgotPassPage = () => {
  return (
    <div className="flex w-full items-center overflow-hidden min-h-dvh h-dvh basis-full">
      <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
        {/* === KIRI: IMAGE / LOGO AREA === */}
        <div className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 relative z-[1] bg-default-50">
          <div className="max-w-[520px] pt-16 ps-20">
            <Link href="/" className="mb-6 inline-block">
              <img
                src="/Group.png"
                alt="Mikul News Logo"
                className="max-w-2xl h-auto drop-shadow-lg"
              />
            </Link>
          </div>
          {/* bisa tambahkan background atau ilustrasi tambahan di sini */}
        </div>

        {/* === KANAN: FORM AREA === */}
        <div className="flex-1 relative dark:bg-default-100 bg-white">
          <div className="h-full flex flex-col">
            <div className="max-w-[524px] mx-auto w-full md:px-[42px] md:py-[44px] p-7 text-2xl text-default-900 mb-3 flex flex-col justify-center h-full">
              {/* TITLE */}
              <div className="text-center mb-5">
                <h4 className="font-medium mb-4">Forgot Your Password?</h4>
              </div>

              {/* INSTRUCTION */}
              <div className="font-normal text-base text-default-500 text-center px-2 bg-gray-100 rounded py-3 mb-6 mt-6">
                Enter your Username and instructions will be sent to you!
              </div>

              {/* FORM */}
              <ForgotPass />

              {/* LINK BACK */}
              <div className="md:max-w-[345px] mx-auto font-normal text-default-500 2xl:mt-12 mt-8 uppercase text-sm text-center">
                Forget it?{" "}
                <Link
                  href="/auth"
                  className="text-default-900 font-medium hover:underline"
                >
                  Send me back
                </Link>{" "}
                to the Sign In
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ForgotPassPage;