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 ">
      <div
        className="position-fixed "
        style={{ background: "white", width: "65%", zIndex: "100" }}
      >
        {" "}
        <nav
          class="navbar navbar-light ms-10 w-auto justify-content-start"
          style={{ opacity: "100%" }}
        >
          <a class="navbar-brand" href="/">
            Home
          </a>
          <a class="navbar-brand" href="/#landingFeatures">
            Features
          </a>
          <a class="navbar-brand" href="/#landingPricing">
            Pricing
          </a>
          <a class="navbar-brand" href="/#landingFAQ">
            FAQ
          </a>
          <a class="navbar-brand" href="/#sectionBlog">
            Blogs
          </a>
          <a class="navbar-brand" href="/#landingCTA">
            Contact Us
          </a>
        </nav>{" "}
      </div>

      {/* <Link
        aria-label="Go to Home Page"
        to="/"
        className="app-brand-link gap-2 position-fixed mt-10 ms-5"
      >
        <h5>
          {" "}
          <i class="bx bx-left-arrow-circle"></i> Home
        </h5>
      </Link> */}
      <Outlet />
    </div>
    // </div>
  );
};

export default AuthLayout;
