import { NextIntlClientProvider } from "next-intl";
import { getMessages, getTranslations } from "next-intl/server";
import ProfileSidebar from "@/components/user-profile/profile-sidebar";
import Breadcrumb from "@/components/Breadcrumb";
import { ProtectedRoute } from "@/components/auth/protected-route";

export default async function UserProfileLayout({
    children,
    params,
}: {
    children: React.ReactNode;
    params: Promise<{ locale: string }>;
}) {
    const { locale } = await params;
    const messages = await getMessages({ locale });
    const t = await getTranslations({ locale, namespace: "navigation" });
    const tProfile = await getTranslations({ locale, namespace: "breadcrumb" });

    return (
        <NextIntlClientProvider locale={locale} messages={messages}>
            <ProtectedRoute>
                <main className="flex-grow container mx-auto px-4 lg:px-8 pb-10 pt-20 lg:pt-32">
                    <div className="flex mb-10 text-sm text-gray-500 dark:text-gray-400">
                        <Breadcrumb
                            items={[
                                { label: t("home"), href: `/${locale}/home` },
                                { label: tProfile("user-profile") || "My Account" }
                            ]}
                        />
                    </div>

                    <div className="flex flex-col lg:flex-row gap-8 lg:gap-16">
                        {/* Sidebar */}
                        <ProfileSidebar />

                        {/* Divider only on desktop */}
                        <div className="hidden lg:block w-px bg-gray-200 dark:bg-gray-700"></div>

                        {/* Main Content Area */}
                        <div className="w-full lg:w-3/4">
                            {children}
                        </div>
                    </div>
                </main>
            </ProtectedRoute>
        </NextIntlClientProvider>
    );
}