import React, { useEffect, useState } from "react";
import Register from "./Register";
import MyAccount from "./MyAccount"; // <-- Import the MyAccount component

function Account() {
  const [isLoggedIn, setIsLoggedIn] = useState(null); // null = loading state

  useEffect(() => {
    fetch('/login/status', {
      method: 'POST',
      credentials: 'include', // Sends cookies with request
    })
    .then(res => res.json())
    .then(data => {
      if (data.message === 'True') {
        setIsLoggedIn(true);
      } else {
        setIsLoggedIn(false);
      }
    })
    .catch(err => {
      console.error("Error checking login status:", err);
      setIsLoggedIn(false); // Assume not logged in on error
    });
  }, []);

  if (isLoggedIn === null) {
    return <div>Loading...</div>; // Optional loading UI
  }

  return (
    <div id="accountpage" className="w-full h-full flex">
      {isLoggedIn ? <MyAccount /> : <Register />}
    </div>
  );
}

export default Account;