import React, { useState } from "react";
import useToggle from "../../hooks/useToggle";
import { drawerToggle } from "../../store/drawer";
import { useSelector } from "react-redux";
import MobileSidebar from "../Partials/MobileSideBar";


export default function DashboardMediaPage({ children }) {

  const { drawer } = useSelector((state) => state.drawer);
  const [MobileSideBar, setMobileSidebar] = useToggle(false);

  return (
    <>
      <div className="nft-main-wrapper-layout w-full mx-auto">
        <div className={`nft-wrapper-layout-container 2xl:pr-20 md:pr-10 pr-2 pl-2 md:pl-0 w-full min-h-screen flex`}>

          {/* end sidebar */}
          <div className={`nft-header-container-wrapper flex-1 md:ml-10 ${drawer ? "2xl:ml-[375px] xl:ml-[310px]" : "xl:ml-[110px]"} h-full`}>
            {/* header */}
            <div className="nft-header w-full lg:h-[100px] h-[70px] default-border-bottom dark:border-[#292967] z-40 xl:sticky fixed top-0 left-0 bg-slate-300 animate-pulse duration-100">
            </div>
            {/* container */}
            <div className="nft-container 2xl:flex 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col xl:flex-row items-start justify-center gap-4">
              <div className="w-full h-full bg-slate-200 animate-pulse duration-300">
                <div className="my-4 lg:flex justify-between items-start space-y-4 lg:space-x-4 lg:space-y-0">
                    <div className="w-full p-10 mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
                        <div className="mb-4 w-full min-h-[500px] bg-slate-200 animate-pulse duration-100"></div>

                        <div className="w-full p-4 h-20 bg-slate-300 animate-pulse duration-200 dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-2"></div>
                    </div>

                    <div className="p-10 w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-4">
                        {/* TEXTAREA SECTION */}
                        <div className="w-full h-40 mb-3">
                            <div className="w-full h-full bg-slate-200 dark:bg-black rounded-2xl shadow-md animate-pulse duration-100"></div>
                        </div>
                        {/* END OF TEXTAREA */}

                        {/* MESSAGE SECTION */}
                        <div className="w-full h-40">
                            <div className="w-full h-full bg-slate-200 dark:bg-black rounded-2xl shadow-md animate-pulse duration-300"></div>
                        </div>
                        {/* END OF MESSAGE */}
                    </div>
                </div>
              </div>

              {/* <div className="nft-right-side-content 2xl:w-[270px] w-full h-full 2xl:flex justify-center relative flex-[20%]">
                <RightSideBar myJobList={userJobList} />
              </div> */}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}