import '../globals.css';
import { Rubik } from 'next/font/google';
import { getScopedI18n } from '@/i18n/server';
import { MockToolbar } from '@/mocks/components/MockToolbar';
import { isMockApiEnabled } from '@/mocks/utils';
import { getBackdropStyle } from '@/utils/getBackdropStyle';
import type { Metadata } from 'next';

const font = Rubik({ subsets: ['latin'] });

export async function generateMetadata(): Promise<Metadata> {
    const t = await getScopedI18n('metadata');

    return {
        title: t('title'),
    };
}

export type RootLayoutProps = LayoutProps<'/[locale]'> & {
    children: React.ReactNode;
};

export default async function RootLayout(props: RootLayoutProps) {
    const params = await props.params;
    const backdropStyle = getBackdropStyle();

    return (
        <html lang={params.locale}>
            <body className={font.className} style={backdropStyle}>
                {props.children}
                {isMockApiEnabled() && <MockToolbar />}
            </body>
        </html>
    );
}
