import { GlobalLayout } from "@/components/global-layout"
import { ProfileNavbar } from "@/components/profile/components/profile-navbar"
import { ProfileSideContent } from "@/components/profile/components/profile-side-content"
import { ProfileUserInfo } from "@/components/profile/components/profile-user-info"
import { IUser } from "@/components/profile/types"
import { Card } from "@/components/ui/card"
import { UserNotFound } from "@/components/user-not-found"
import getURL from "@/lib/utils"

export const dynamic = 'force-dynamic'
export const fetchCache = 'force-no-store'

export default async function ProfileLayout({
    params,
    children,
}: {
    params: { username: string }
    children: React.ReactNode
}) {
    const user: IUser = await fetch(getURL(`/api/users/${params.username}`)).then((result) => result.json())

    return (
        <GlobalLayout
            mainContent={
                <Card className="overflow-hidden h-full w-full">
                    {!user ?
                        <UserNotFound />
                        :
                        <>
                            <ProfileUserInfo user={user} />
                            <ProfileNavbar param={params.username}>
                                {children}
                            </ProfileNavbar>
                        </>
                    }
                </Card>
            }
            sideContent={<ProfileSideContent user={user} />}
        />
    )
}