import ForgotPasswordForm from "./_components/ForgotPasswordForm"
import Link from "next/link"
import { getDictionary } from "@/utils/getDictionary";
import { LRFFlowContent } from "@/types/staticContent/lrfflow.content.type";
import { cookies } from "next/headers";


type Props = {}

const page = async (props: Props) => {
    const LRFFlow = await getDictionary('lrf-flow') as LRFFlowContent;
    const cookieStore = await cookies();
    const language = cookieStore?.get('language')?.value as string || 'en';
    return (
        <>
            {/* <Button icon={<><i className="w-5 md:w-6 h-5 md:h-6 bg-grey92 icon icon-chevron-left group-hover:bg-primary" /></>} as="link" iconPosition="left" href={ROUTES.LOGIN} linkVariant="text" className="text-grey92! group hover:text-primary! mb-5!">
                Back
            </Button> */}
            <Link href={'/login'} className="inline-flex items-center md:gap-1 text-grey92 text-sm md:text-base 2xl:text-lg mb-5 hover:text-primary group duration-300 ease-in-out"><i className={`w-5 md:w-6 h-5 md:h-6 bg-grey92 icon icon-chevron-left group-hover:bg-primary ${language === "en" ? "" : "rotate-180"}`} ></i> {LRFFlow.FORGOT_PASSWORD.BACK}</Link>

            <div className="text-center lg:pt-5 mb-4 md:mb-6 lg:mb-10">
                <h2 className="text-light text-2xl lg:text-3xl 2xl:text-4xl font-bold mb-2 lg:mb-3 2xl:mb-4">{LRFFlow.FORGOT_PASSWORD.FORGOT_PASSWORD}</h2>
                <p className="text-sm md:text-base xl:text-lg font-medium text-grey92">
                    {LRFFlow.FORGOT_PASSWORD.PLEASE_ENTER_DETAILS}
                </p>
            </div>

            <ForgotPasswordForm staticContent={LRFFlow.FORGOT_PASSWORD}/>
        </>
    )
}

export default page