'use client';

import { useEffect } from "react";
import Header from './header';
import Sidebar from './sidebar';
import UserDetail from './userDetail';

// AOS
import Aos from "aos";
import "aos/dist/aos.css";

function LayoutPanel({ children, data }) {

    useEffect(() => {
        Aos.init({ duration: 1000 });
    }, [])

    return (
        <div className="flex min-h-screen">
            <Sidebar />
            <main className="w-full">
                <Header />
                <section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
                    {children}
                </section>
            </main>
            <UserDetail data={data} />
        </div>
    )
}

export default LayoutPanel