"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;