'use client'
import Button from "@/components/ui/Button"
import VerifyYourEmailForm from "./_components/VerifyYourEmailForm"
import { ROUTES } from "@/utils/Routing"
import Link from "next/link"
import { useSearchParams } from "next/navigation"
import { decrypt } from "@/utils/Crypto"
import { useAuthStore } from "@/zustand/auth/useAuthStore"
import { LRFFlowContent } from "@/types/staticContent/lrfflow.content.type"
import { getClientDictionary } from "@/utils/getClientDictionary"

type Props = {}

function page({ }: Props) {
    const { language } = useAuthStore();
    const searchParams = useSearchParams()
    const encryptedEmail = searchParams.get('email')
    const email = encryptedEmail ? decrypt(decodeURIComponent(encryptedEmail)) : ''
    const LRFFlow = getClientDictionary(language, 'lrf-flow') as LRFFlowContent;
    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.FORGOT_PASSWORD} 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.VERIFY_YOUR_EMAIL.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.VERIFY_YOUR_EMAIL.VERIFY_YOUR_EMAIL}</h2>
                <p className="text-sm md:text-base xl:text-lg font-medium text-grey92">
                    {LRFFlow.VERIFY_YOUR_EMAIL.WE_SENT_A_CODE_TO} {' '}
                    <Button as="link" href={`mailto:${email}`} linkVariant="text">
                        {email}
                    </Button>
                </p>
            </div>

            <VerifyYourEmailForm staticContent={LRFFlow.VERIFY_YOUR_EMAIL}/>

        </>
    )
}

export default page