import { useStore } from "@nanostores/react";
import { Spin } from "antd";

import { Navigate } from "react-router-dom";

import { isAuthorized$, userInfoLoading$ } from "./stores/auth";

export function WithAuth(props) {
  const isAuthorized = useStore(isAuthorized$);
  const userInfoLoading = useStore(userInfoLoading$);

  if (userInfoLoading) {
    return <Spin className="user-info-loader" />;
  }

  if (isAuthorized) {
    return <>{props.children}</>;
  }

  return <Navigate to="/signin" replace={true} />;
}