import Image from "next/image";
import { getTranslations } from "next-intl/server";

import { useTranslations, useLocale } from "next-intl";
import { Link } from "@/i18n/navigation";
import { LanguageSwitcher } from "@/components/appearance/language";
import { ResetPasswordForm } from "./_form";

export const generateMetadata = async () => {
    const t = await getTranslations();
    return {
        title: t('routes.reset-password') || "Reset Password"
    }
};

export default function ResetPassword() {
    const t = useTranslations();
    const locale = useLocale();
    
    return (
        <main className="grid place-items-center md:grid-cols-3 min-h-dvh">
            <div className="bg-white size-full grid place-items-center relative">
                <div className="absolute top-4 end-4">
                    <LanguageSwitcher seeLang={true} />
                </div>
                
                <ResetPasswordForm/>
            </div>
            <div className="relative md:col-span-2 hidden md:flex md:flex-col size-full bg-[linear-gradient(180deg,rgba(255,234,239,0.1),rgba(64,232,221,0.1))] justify-center items-center gap-2">
                <div>
                    <p className="text-2xl font-bold text-baby-blue">
                        {t("welcome")}
                    </p>
                </div>
                <div>
                    <Link href={'/'}>
                        <Image
                            src={locale === 'ar' ? '/images/logo.png' : '/images/logo-en.png'}
                            alt="mwaheb-logo"
                            className="w-full h-20 object-contain"
                            width={200}
                            height={200}
                            priority
                        />
                    </Link>
                </div>
            </div>
        </main>
    )
}