import React, { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Outlet } from "react-router-dom";
import Navbar from "./Components/Navbar";
import Sidebar from "./Components/Sidebar";
import Footer from "./Components/Footer";

const Root = () => {
  const [sideBarOpen, setSideBarOpen] = useState(false);
  return (
    <div className="xl:container mx-auto">
      <Navbar sideBarOpen={sideBarOpen} openSideBar={setSideBarOpen} />
      <div className="flex">
        <AnimatePresence>
          {sideBarOpen && (
        <div id="backdrop"  className="w-full h-screen absolute top-0 left-0 bg-black/20" onClick={() => setSideBarOpen(false)}>

            <motion.div
              initial={{ opacity: 0 }}
              style={{ originX: 0.5 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{}}
              duration="1.5s"
              >
              <Sidebar />
            </motion.div>
              </div>
          )}
        </AnimatePresence>
        <div id="detail" className="py-3 mt-24 px-2 w-full">
          <Outlet />
        </div>
      </div>
      <Footer />
    </div>
  );
};

export default Root;