import React from "react";
import { Link, Outlet } from "react-router-dom";
import { QueryClient } from "@tanstack/react-query";
import { AuthWrapper } from "../pages/authentication/AuthWrapper";

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 min: data considered fresh
      refetchOnWindowFocus: true, // refresh on tab switch
      refetchOnReconnect: true, // re-fetch if network was lost
      retry: false,
    },
  },
});

const AuthLayout = () => {
  return (
    // <div className="login-box">
    <div className="authentication-wrapper authentication-cover">
      <Link
        aria-label="Go to Home Page"
        to="/"
        className="app-brand-link gap-2 position-fixed top-2 start-0 mx-2 mx-sm-4"
      >
        <span className="app-brand-logo rounded-circle ">
          <img
            src="/img/brand/marco.png"
            alt="marco-logo"
            className="app-brand-logo-login"
          />
        </span>
      </Link>
      <Outlet />
    </div>
    // </div>
  );
};

export default AuthLayout;