// File Path: monorepo/native/desktop/maplefile/frontend/src/pages/Anonymous/Register/VerifySuccess.jsx
import { useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import Page from "../../../components/Page";

function VerifySuccess() {
  const navigate = useNavigate();

  useEffect(() => {
    // Auto-redirect to login after 5 seconds
    const timer = setTimeout(() => {
      navigate("/login");
    }, 5000);

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

  return (
    <Page title="Registration Successful">
      <div style={{ maxWidth: "500px", textAlign: "center", margin: "0 auto" }}>
        <div style={{ fontSize: "48px", marginBottom: "20px" }}>✅</div>

        <h2 style={{ color: "#333", marginBottom: "15px" }}>
          Email Verified Successfully!
        </h2>

        <p style={{ color: "#666", marginBottom: "10px", fontSize: "16px" }}>
          Your account has been successfully created and verified.
        </p>

        <p style={{ color: "#666", marginBottom: "30px", fontSize: "16px" }}>
          You can now log in to access your MapleFile account.
        </p>

        <div
          style={{
            background: "#f0f0f0",
            padding: "15px",
            borderRadius: "5px",
            marginBottom: "30px",
          }}
        >
          <p style={{ margin: 0, fontSize: "14px", color: "#666" }}>
            Redirecting to login page in 5 seconds...
          </p>
        </div>

        <div className="nav-buttons">
          <Link to="/login" className="nav-button success">
            Login Now
          </Link>
        </div>
      </div>
    </Page>
  );
}

export default VerifySuccess;
