import { JSX, useLayoutEffect } from 'react';
import { useDispatch, useSelector } from "react-redux";
import { fetchUserDetails } from '../../store/slices/userSlice';
import { AppDispatch, RootState } from '../../store/store';

const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
  const dispatch = useDispatch<AppDispatch>();
  const user = useSelector((state: RootState) => state.user);

  useLayoutEffect(() => {
    // Fetch only if we don't have user data yet
    if (user.id == null && user.loading == false) {
      dispatch(fetchUserDetails());
    }
  }, [dispatch, user, status]);

  return children;
};

export default ProtectedRoute;