import React, { ReactNode, Suspense } from 'react';
import { Metadata } from 'next';
import { unstable_setRequestLocale } from 'next-intl/server';
import { notFound } from 'next/navigation';
import { ConfigProvider } from 'antd';
import { AntdRegistry } from '@ant-design/nextjs-registry';
import theme from '../../constants/theme';
import { ALLOWED_LOCALES } from '../../constants/locale';
import { Header, Footer, AppConfig } from '../../components/Page';

type LayoutProps = {
    children: ReactNode;
    params: { locale: string };
};

export function generateStaticParams() {
    return ALLOWED_LOCALES.map((locale) => ({ locale }));
}

export const metadata: Metadata = {
    title: 'Bbuddy'
};

export default function LocaleLayout({ children, params: { locale } }: LayoutProps) {
    if (!ALLOWED_LOCALES.includes(locale as any)) notFound();

    unstable_setRequestLocale(locale);

    return (
        <AntdRegistry>
            <ConfigProvider theme={theme}>
                <div className="b-wrapper">
                    <Suspense fallback={null}>
                        <AppConfig />
                    </Suspense>
                    <div className="b-content">
                        <Header locale={locale} />
                        {children}
                    </div>
                    <Footer locale={locale} />
                </div>
            </ConfigProvider>
        </AntdRegistry>
    );
};