import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useAppContext } from "../context";
import { Paths } from "../routes";

interface ProtectedRouteProps {
  children: React.ReactNode;
}

/**
 * A component that protects routes from unauthorized access.
 * If the user is not authenticated, they will be redirected to the login page.
 */
export const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
  const { isAuthenticated } = useAppContext();
  const navigate = useNavigate();

  useEffect(() => {
    if (!isAuthenticated) {
      navigate(Paths.LOGIN);
    }
  }, [isAuthenticated, navigate]);

  return <>{children}</>;
};