import { commonActions } from '@/redux/slices/Common/commonSlice';
import { AppDispatch } from '@/redux/store';
import { LRFFlowContent } from '@/src/types/StaticContent/lrfflow.content.type';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import CheckGif from '../../../../../public/images/check-gif.gif';

const ProfileCreated: React.FC<{ CreateProfileContent: LRFFlowContent }> = ({ CreateProfileContent }) => {
    const dispatch = useDispatch<AppDispatch>();
    const router = useRouter();

    useEffect(() => {
        const timer = setTimeout(() => {
            dispatch(commonActions.setLRFModalOpen(false));
            dispatch(commonActions.setIsLoggedIn(true));
            router.refresh();
        }, 2000);

        return () => clearTimeout(timer);
    }, [dispatch]);

    return (
        <>
            <div className='flex flex-col items-center justify-center py-7 lg:py-10'>
                <Image className='!w-[100px] !h-[100px]' width={100} height={100} src={CheckGif} alt='profile-created' />
                <div className='text-center mt-5 md:mt-6'>
                    <h4 className="title !mb-3">{CreateProfileContent.PROFILE_CREATED}</h4>
                    <p className="fs-16 !text-center text-grey667Color">{CreateProfileContent.PROFILE_SUCCESS}</p>
                </div>
            </div>
        </>
    )
}

export default ProfileCreated