import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import './VerifyEmailSuccess.css';

const VerifyEmailSuccess = () => {
  const navigate = useNavigate();

  useEffect(() => {
    // Auto-close after 10 seconds
    const timer = setTimeout(() => {
      navigate('/');
    }, 10000);

    // Cleanup timer on unmount
    return () => clearTimeout(timer);
  }, [navigate]);

  return (
    <div className="verify-success-container">
      <div className="verify-success-card">
        <div className="success-icon">✓</div>
        <h2>Email Verified Successfully!</h2>
        <p>Your email has been verified. You can now access all features of your account.</p>
        <p className="redirect-message">Redirecting to home page in 10 seconds...</p>
        <button
          className="home-btn"
          onClick={() => navigate('/')}
        >
          Go to Home Now
        </button>
      </div>
    </div>
  );
};

export default VerifyEmailSuccess;
