import { Toolbar } from "@/app/components/portfolio/Toolbar";
import { getPortfolio } from "../utils";

import * as React from "react";

export default async function PortfolioLayout(props: {
  children: React.ReactNode;
  params: Promise<{ slug: string }>;
}) {
  const params = await props.params;

  const {
    // will be a page or nested layout
    children,
  } = props;

  const portfolioId = params.slug;
  const { name: portfolioName } = await getPortfolio(portfolioId);

  return (
    <section>
      <div className="flex justify-center print:hidden">
        <h1 className="text-2xl text-gray-700 font-bold mt-1 mb-1">
          {portfolioName}
        </h1>
      </div>
      <div className="flex justify-center">
        <div className="grid grid-cols-8 w-full max-w-8xl">
          <div className="col-span-12 justify-center bg-gray-50 py-1 px-4 relative">
            <Toolbar portfolioId={portfolioId} />
          </div>
          <div className="col-span-12">
            {children}
          </div>
        </div>
      </div>
    </section>
  );
}
