"use client"
import { CheckSVG } from '@/assets/svg';
import { Button } from '@/components/ui/buttons/Button';
import { H1, P } from '@/components/ui/typography';
import { ArrowRight } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { useRouter , useSearchParams } from  'next/navigation'

const ThankYouPage = () => {
    const t = useTranslations("");
 const router = useRouter()
    const searchParams = useSearchParams()
    const fromPath = searchParams.get('from') || '/'
    return (
        <div className="bg-gray-100 pb-60 flex justify-center pt-40 ">
            <div className="bg-white rounded-lg shadow-md p-8  max-w-lg w-full  flex flex-col items-center gap-4">
                <CheckSVG className="w-[80px] h-[80px] fill-[#4FB277] text-white"/>
                <H1 className=" !text-xl text-center">{t("You're reservation is well registered")}</H1>
                <P className="text-center">{t("Please expect to receive a confirmation mail on your registered email, containing the meeting link")}</P>
                <Button url='' onClick={() => router.push(fromPath)} className='flex items-center gap-2 group mt-3'>
                    {t("Back home")}
                    <ArrowRight className="w-4 h-4 group-hover:translate-x-1 duration-200" />
                </Button>
            </div>
        </div>
    );
};

export default ThankYouPage;