import { useEffect } from 'react';
import { useRouter } from 'next/router';
import basicstore from '@/stores/auth';
import Footer from '@/shared/common/Footer';
import Navbar from '@/shared/common/Navbar';
import Sidebar from '@/shared/common/Sidebar';

type Props = {
  children: React.ReactNode;
};

const Layout = ({ children }: Props) => {
  const router = useRouter();

  const { isLoggedIn, userType } = basicstore();

  useEffect(() => {
    if (!isLoggedIn) router.push('/login');
  }, [isLoggedIn, router]);

  return (
    <div className="body-wrapper">
      <div className="nav-block">
        <div className="nav-logo-wrapper">
          <div className="logo-block">
            <a className="nav-logo" href="#">
              <span className="logo-img">
                <img src="img/logo-img.svg" alt="" />
              </span>
              <span className="logo-txt">
                <img src="img/logo-propbase.svg" alt="" />
              </span>
            </a>
          </div>
          <div className="toggle-btn-block">
            <button className="nav-toggle-btn" id="navToggleBtn">
              {/* <img src="img/nav-toggle.svg" alt=""> */}
              <span className="line-cover">
                <span className="nav-line" />
                <span className="nav-line" />
                <span className="nav-line" />
              </span>
            </button>
          </div>
        </div>
        <Sidebar userRole={userType} />
      </div>
      <div className="content-block-outer">
        <Navbar />
        <div className="body-content-outer">{children} </div>
        <Footer />
      </div>
    </div>
  );
};

export default Layout;