"use client";

import { useEffect, useState } from "react";
import Header from "@/components/layoutPanel/header";
import Sidebar from "@/components/layoutPanel/sidebar";
import Information from "@/data/information.json";
import UserDetail from "@/components/layoutPanel/userDetail";
import { usePathname } from "next/navigation";
import BgGray from "@/components/layoutPanel/sidebar/BgGray";

function Content({ children }) {
  const pathname = usePathname();
  const [active, setActive] = useState(false);
  const [open, setOpen] = useState(true);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <div className="flex min-h-screen dark:bg-[#1F1D2B]">
      <Sidebar
        open={open}
        active={active}
        setOpen={setOpen}
        setActive={setActive}
      />
      <BgGray isActive={active} setIsActive={setActive} />
      <main
        className={`
          w-full transition-all duration-500 dark:bg-[#1F1D2B]
          ${
            pathname.includes("dashboard")
              ? open
                ? "md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]"
                : "md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]"
              : open
                ? "md:w-[calc(100%-243px)]"
                : "md:w-[calc(100%-96px)]"
          }
        `}
      >
        <Header
          data={Information}
          setActive={setActive}
          disableProfile={pathname.includes("dashboard")}
        />
        <section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA] dark:bg-[#1F1D2B]">
          {children}
        </section>
      </main>
      {pathname.includes("dashboard") && (
        <UserDetail data={Information} loading={loading} />
      )}
    </div>
  );
}

export default Content;