'use client'
import { FaBars } from 'react-icons/fa';
import { useState } from 'react';
import NavBar from '@/app/components/NavBar';

export default function Layout({ children , session}: { children: React.ReactNode , session: any }) {
  const [isOpen, setIsOpen] = useState(false);
  console.log(session);
  return (
    <div className="bg-[#F5F5F5] h-full flex flex-row " onClick={() => setIsOpen(false)}>
      <NavBar isOpen={isOpen} setIsOpen={setIsOpen} user={session?.user} />
      <div className="flex-1 h-full lg:mr-5 ">
        <div className="absolute h-[50px] top-0 left-0 lg:hidden flex flex-row justify-center items-center bg-white border-b-1 border-[#D5D5D5]"> 
          <FaBars className="m-2 h-[35px] absolute top-0 left-0 lg:hidden cursor-pointer" onClick={(e) => {e.stopPropagation(); setIsOpen(true)}}/>
        </div>
        <div className="absolute h-[50px] top-0 left-[50%] translate-x-[-50%] flex flex-row justify-center items-center cursor-pointer lg:hidden ">
          <svg width="32" height="20" viewBox="0 0 32 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 13.7815C0 11.1485 1.5051 9.48685 3.07055 8.61376C4.53165 7.7989 6.17151 7.56314 7.25262 7.56307H29.6288C30.9383 7.56309 32 8.65413 32 10C31.9999 11.3458 30.9383 12.4369 29.6288 12.4369H7.25262C6.70651 12.437 5.90554 12.5782 5.33295 12.8974C5.06963 13.0443 4.93117 13.1859 4.86171 13.2901C4.80809 13.3706 4.74246 13.5037 4.74246 13.7815C4.7425 14.0589 4.80813 14.1913 4.86171 14.2718C4.93111 14.376 5.06944 14.5175 5.33295 14.6644C5.90555 14.9838 6.70643 15.126 7.25262 15.1261H23.5259C24.8355 15.1261 25.8971 16.2172 25.8971 17.5631C25.8969 18.9088 24.8354 20 23.5259 20H7.25262C6.17151 19.9999 4.53165 19.763 3.07055 18.9481C1.50525 18.075 9.38884e-05 16.4143 0 13.7815ZM29.6288 0C30.9383 2.26081e-05 32 1.09107 32 2.43693C32 3.7828 30.9383 4.87385 29.6288 4.87387H14.5759C13.2664 4.87375 12.2046 3.78275 12.2046 2.43693C12.2046 1.09112 13.2664 0.000115545 14.5759 0H29.6288Z" fill="#F94B37" />
          </svg>
          <span className="text-black text-2xl font-bold">EVERFACTORY</span>
        </div>
        <div className="h-[50px] lg:hidden bg-white"> 
        </div>
        <div className="overflow-y-auto h-[calc(100vh-56px)] lg:h-[calc(100vh)] max-w-[1920px] mx-auto">
          {children}
        </div>
      </div>
    </div>
  );
}