import AuthModal from "@/components/ChatsPath/components/AuthModal";
import styles from "./styles.module.scss";
import { Outlet } from "react-router-dom";
import { useAuth } from "@/auth";
import { useMemo } from "react";

function Auth() {
  const { user, token } = useAuth();
  const isAuth = useMemo(() => !!user && !!token, [user, token]);

  return (
    <div className={styles.container}>
      <div className={`${!isAuth && styles.blur}`}>
        <Outlet />
      </div>
      {!isAuth && <AuthModal />}
    </div>
  );
}

export default Auth;
