'use client'
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useGlobalContext } from '@/context/Provider';
import UnderReviewGIF from '@/assets/gif/undereview.gif';

const UnderReviewPage = () => {
  const { notificationData } = useGlobalContext();
  const router = useRouter();

  useEffect(() => {
    if (notificationData?.notification?.body === "Your vendor/store has been approved.") {
      router.push('/');
    }
  }, [notificationData, router]);

  const handleBackToLogin = () => {
    router.push('/');
  };

  return (
    <div className="flex h-screen flex-col items-center justify-center bg-[var(--primary-brand)]/10">
      <div className='flex flex-col items-center justify-center w-[50%] h-[50%]'>
        <img src={UnderReviewGIF.src} alt="Under Review" className="border-0 max-h-[300px] object-contain rounded-2xl" />
        <p className="text-center text-2xl font-bold text-gray-800 mt-6">
          Your application is still under review...
        </p>
        <button
          onClick={handleBackToLogin}
          className="mt-6 px-8 py-3 bg-[var(--primary-brand)] text-white font-semibold rounded-xl hover:bg-[var(--primary-brand)]/90 active:scale-[0.98] transition-all shadow-lg shadow-[var(--primary-brand)]/20"
        >
          Back to Login
        </button>
      </div>
    </div>
  );
};

export default UnderReviewPage;