  import React, { useContext, useEffect } from 'react'
import PublicRoutes from './JKPublicRoutes';
import UserAuth from '../context/UserAuth';
import { BrowserQueryProvider } from '../context/BrowserQuery';
import Logo from '../components/navbar/Logo';
import AppContext from "../context/Context";
import { topNavbarBreakpoint } from '../config';
import { Navbar } from 'reactstrap';
import Footer from '../components/footer/JKFooter';
import {useResponsive} from "@farfetch/react-context-responsive";

const JKPublicLayout =  ({ location }) => {

  const {
    isFluid,
    isTopNav,
  } = useContext(AppContext);

  const { greaterThan } = useResponsive();

  const paddingClass = greaterThan.sm ? "px-6" : "px-1";

  return (
    <div className={isFluid ? 'container-fluid' : 'container'}>
      <div className="content">
        <Navbar
          light
          color="white"
          className={`navbar-glass fs--1 font-weight-semi-bold row navbar-top sticky-kit mb-3 py-3 ${paddingClass}`}
          expand={isTopNav && topNavbarBreakpoint}
        >
          <Logo at="navbar-top" id="topLogo" width={240} />
        </Navbar>
        <div className={`pt-3 row ${paddingClass}`}>
        <UserAuth path={location.pathname}>
    
          <BrowserQueryProvider>
            <PublicRoutes />
          </BrowserQueryProvider>
          </UserAuth>
        </div>
        {/* <div className='px-6 row'> */}
          <Footer />
        {/* </div> */}
       
      </div>
    </div>
  )
}

export default JKPublicLayout
