import { ReactNode } from "react";
import { fetchUserProfile } from "@/data/user";
import Sidebar from "@/components/layout/sidebar";
import TopBar from "@/components/layout/top-bar";

export default async function ProtectedLayout({ children }: { children: ReactNode }) {
  const user = await fetchUserProfile();

  return (
    <div className="flex min-h-screen bg-white text-slate-900 dark:bg-slate-950 dark:text-white">
      <Sidebar user={user} />
      <div className="flex flex-1 flex-col">
        <TopBar user={user} />
        <main className="flex-1 overflow-y-auto bg-white p-6 dark:bg-slate-950">{children}</main>
      </div>
    </div>
  );
}