'use client';

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 { useState } from "react";

function LayoutPanel({ children }) {

    const pathname = usePathname();
    const [active, setActive] = useState(false);

    return (
        <div className="flex min-h-screen">
            <Sidebar
                active={active}
                setActive={setActive}
            />
            <main className="w-full">
                <Header
                    data={Information}
                    setActive={setActive}
                    disableProfile={pathname.includes('dashboard')}
                />
                <section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
                    {children}
                </section>
            </main>
            {pathname.includes('dashboard') && (
                <UserDetail data={Information} />
            )}
        </div>
    )
}

export default LayoutPanel