import {Metadata} from "next";
import AppMainContainer from "@/components/Application/Common/AppMainContainer";
import ProfileNavBarContainer from "@/components/Application/Common/Profile/ProfileNavBarContainer";
import LogoutDialog from "@/components/Application/Common/Profile/LogoutDialog";

export const metadata: Metadata = {
    title: "TheraChat Eswatini | Profile",
    description: "TheraChat is an innovative mobile platform that connects you with professional counselors, therapists, and mental health experts, providing accessible and convenient mental health services.",
};

export default function RootLayout({children,}: Readonly<{ children: React.ReactNode; }>) {
    return (
        <AppMainContainer>
            <main
                className="flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10">
                <div className="mx-auto flex justify-between w-full max-w-6xl">
                    <h1 className="text-2xl md:text-3xl font-semibold text-gray-700">Profile and Settings</h1>
                    <LogoutDialog/>
                </div>
                <div
                    className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">

                    <ProfileNavBarContainer/>
                    {children}

                </div>
            </main>
        </AppMainContainer>
    )
}