import PageNotFound from "@/components/error-pages/404";
import ProfileHeader from "@/components/shared/ProfileHeader";
import { fetchUser } from "@/lib/api/users";

import { ProfileLinks } from "@/constants";
import { currentUser } from "@/lib/api/auth";
import { UserType } from "@/types";
import ProfileLink from "@/components/shared/ProfileLink";
import { Metadata } from "next";

export const generateMetadata = async ({
  params: { locale, id },
}: {
  params: { locale: string; id: string };
}): Promise<Metadata> => {
  const user = await fetchUser(locale, id as string);

  return {
    title: user.name,
  };
};

const Layout = async ({
  children,
  params: { locale, id },
}: {
  children: React.ReactNode;
  params: { locale: string; id: string };
}) => {
  const follower = await currentUser();

  let user: UserType | null = null;
  if (follower) {
    user = await fetchUser(locale, id as string, follower?.id?.toString());
  } else {
    user = await fetchUser(locale, id as string);
  }

  if (!user?.id) return <PageNotFound />;

  return (
    <>
      <div>
        <ProfileHeader user={user} follower={follower} />

        <div className="items-center justify-center rounded-md bg-muted p-1 text-muted-foreground w-full grid md:grid-cols-4 mobile-lg:grid-cols-3 sm:grid-cols-4 grid-cols-2">
          {ProfileLinks.map((item, index: number) => (
            <ProfileLink key={index} item={item} user={user} />
          ))}
        </div>
      </div>

      {children}
    </>
  );
};

export default Layout;