import Image from 'next/image';
import sonyMusicLogo from '@/assets/sony_music_logo.svg';
import { I18nProviderClient } from '@/i18n/client';
import { getScopedI18n } from '@/i18n/server';

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

export default async function ProfileLayout(props: ProfileLayoutProps) {
    const params = await props.params;
    const t = await getScopedI18n('pages.profile');

    return (
        <I18nProviderClient locale={params.locale}>
            <div className="flex flex-col items-center p-5">
                <div className="content-column">
                    <div className="flex flex-col items-center p-10">
                        <Image
                            src={sonyMusicLogo}
                            alt={t('logoAltText')}
                            width={284}
                            height={64}
                            priority
                        />
                    </div>
                    {props.children}
                    {props.footer && <div className="p-5">{props.footer}</div>}
                </div>
            </div>
        </I18nProviderClient>
    );
}