import type { Metadata } from 'next';
import { getSEOConfig } from '../../../lib/seo-config';
import AboutServerComponent from '@/app/components/about/AboutServerComponent';

// Generate static params for supported locales
export async function generateStaticParams() {
    return [
        { locale: 'zh' },
        { locale: 'zh-CN' },
        { locale: 'zh-TW' },
        { locale: 'en' },
    ];
}

// Generate metadata for the about page
export async function generateMetadata({
    params: { locale },
}: {
    params: { locale: string };
}): Promise<Metadata> {
    const language = locale === 'zh' ? 'zh-CN' : locale === 'zh-CN' ? 'zh-CN' : locale === 'zh-TW' ? 'zh-TW' : 'en';
    const seo = getSEOConfig('about', language);

    return {
        title: seo.title,
        description: seo.description,
        keywords: seo.keywords,
        openGraph: {
            title: seo.openGraph?.title,
            description: seo.openGraph?.description,
            type: seo.openGraph?.type as any,
            images: seo.openGraph?.images,
        },
        twitter: {
            card: seo.twitter?.card as any,
            title: seo.twitter?.title,
            description: seo.twitter?.description,
            images: seo.twitter?.images,
        },
        alternates: {
            canonical: locale === 'zh' ? '/about' : `/${locale}/about`,
            languages: {
                'zh-CN': '/about',
                'zh-TW': '/zh-TW/about',
                en: '/en/about',
            },
        },
    };
}

export default function AboutPage({ params: { locale } }: { params: { locale: string } }) {
    const mappedLocale = locale === 'zh' ? 'zh-CN' : locale === 'zh-CN' ? 'zh-CN' : locale === 'zh-TW' ? 'zh-TW' : 'en';
    
    return <AboutServerComponent locale={mappedLocale} />;
}
