import React, { ReactNode } from 'react';
import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { AccountMenu } from '../../../components/Account';

type AccountLayoutProps = {
    children: ReactNode;
    params: Record<string, string>;
};

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

export function generateStaticParams({
    params: { locale },
}: { params: { locale: string } }) {
    const result: { locale: string, userId: string }[] = [];
    const users = [{ userId: '1' }, { userId: '2' }];

    users.forEach(({ userId }) => {
        result.push({ locale, userId });
    });

    return result;
}

const ROUTES = ['sessions', 'notifications', 'support', 'information', 'settings', 'messages', 'work-with-us'];
const COUNTS: Record<string, number> = {
    sessions: 12,
    notifications: 5,
    messages: 113
};


export default function AccountLayout({ children, params }: AccountLayoutProps) {
    if (!params?.userId || isNaN(Number(params?.userId))) notFound();

    const t = useTranslations('Account');

    const getMenuConfig = () => ROUTES.map((path) => ({
        path,
        title: t(`menu.${path}`),
        count: COUNTS[path] || undefined
    }));

    return (
        <div className="page-account">
            <div className="b-inner">
                <div className="row">
                    <div className="col-xl-3 col-lg-4 d-none d-lg-block">
                        <AccountMenu userId={params.userId} menu={getMenuConfig()} />
                    </div>
                    <div className="col-xl-9 col-lg-8 ">
                        <div className="page-account__inner">
                            {children}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};