import React, { useEffect } from "react";
import { useParams } from "react-router-dom";
import { useUser, UserType } from "../Components/UserContext";
import { Typography, Box } from "@mui/material";

const mockFetchUser = async (username: string) => {
  return new Promise<UserType>((resolve) => {
    const user : UserType = {
      type: "candidate",
      name: username,
      isAuthenticated: true,
      logout: () => {},
    };
    setTimeout(() => resolve(user), 500);
  });
};

const UserRoute: React.FC = () => {
  const { username } = useParams<{ username: string }>();
  const { user, setUser } = useUser();

  useEffect(() => {
    if (username) {
      mockFetchUser(username).then(setUser);
    }
  }, [username, setUser]);

  return (
    <Box m={2}>
      <Typography variant="h5">User Page</Typography>
      <Typography variant="body1">
        {user ? `Hello, ${user.name}` : "Loading..."}
      </Typography>
    </Box>
  );
};

export { UserRoute };