import React from 'react'
import { Outlet, useLocation } from 'react-router-dom';
import UserMenu from "./layoutcom/UserMenu";
import UserHeader from "./layoutcom/UserHeader";
import UserFooter from "./layoutcom/UserFooter";
import siteLinks from '../../links/siteLinks';


export default function Layout() {

  const {pathname} = useLocation()
  const isProfileComplete = pathname == siteLinks.profile_complete

  return (
      <div className="app">
        {isProfileComplete ?
        <div className="app-wrap">
          <UserHeader />
          <div className="container-fluid">
            <Outlet />
          </div>
          <UserFooter isProfileComplete={isProfileComplete} />
        </div>
        :
        <div className="app-wrap">
          <UserHeader />
          <div className="app-container">
            
            <aside className="app-navbar">
              <UserMenu />
            </aside>
            <div className="app-main" id="main">
              <div className="container-fluid">
                <Outlet />
              </div>
            </div>
          </div>
          <UserFooter />
        </div>
        }
      </div>
  )
}
