import { Suspense } from "react";
import { Sidebar } from "@/components/Sidebar";
import { Flash } from "@/components/Flash";
import { getUser, getWorkspace, getWorkspaces } from "@/lib/data";
import { signOut } from "@/app/login/actions";

export default async function WorkspaceLayout({
  children, params,
}: {
  children: React.ReactNode;
  params: Promise<{ ws: string }>;
}) {
  const { ws: id } = await params;
  const [user, ws, workspaces] = await Promise.all([getUser(), getWorkspace(id), getWorkspaces()]);
  const name = (user.user_metadata?.full_name as string) || user.email || "";

  return (
    <div className="md:flex">
      <Sidebar ws={ws} workspaces={workspaces} userName={name} signOut={signOut} />
      <main className="min-w-0 flex-1 px-4 py-6 md:px-8 md:py-8">
        <div className="mx-auto max-w-6xl">
          <Suspense><Flash /></Suspense>
          {children}
        </div>
      </main>
    </div>
  );
}