import LoadingState from "@/components/LoadingState";
import RecruitmentProfile from "@/components/RecruitmentProfile";

import type { Metadata } from "next";

import { Suspense } from "react";
import Navigation from "./_ui/Navigation";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default async function RootLayout({
  children,
  params,
}: Readonly<{
  children: React.ReactNode;
  params: Promise<{ single_recruit: string }>;
}>) {
  const { single_recruit } = await params;

  // console.log(single_recruit);

  // let userDetails: any;
  // try {
  //   const response = await instance.get(`/users/${single_recruit}`);
  //   userDetails = response.data;
  // } catch (error: any) {
  //   console.log(error.response.data);
  //   return <p>error</p>;
  // }

  return (
    <div className="flex flex-col flex-1 gap-3 p-3 w-full h-full ">
      <div className="p-8">
        <Suspense
          fallback={
            <LoadingState className="w-full flex justify-center items-center " />
          }
        >
          <RecruitmentProfile id={single_recruit} />
        </Suspense>
      </div>
      <Navigation
        navLinks={[
          {
            menu: "Screening",
            link: `/dashboard/recruitment/${single_recruit}/screening?query=personal_info`,
          },
          {
            menu: "Reference",
            link: `/dashboard/recruitment/${single_recruit}/reference`,
          },
          {
            menu: "Training",
            link: `/dashboard/recruitment/${single_recruit}/training`,
          },
        ]}
      />
      <div className=" flex-1 w-full flex flex-col gap-3 md:overflow-y-auto ">
        <div className="flex-1 w-full overflow-y-auto">{children}</div>
      </div>
    </div>
  );
}