import { FC, Suspense } from 'react';
import { Main } from '@/app/ui/Main';
import { AccountForm, AccountFormSkeleton } from '@/app/ui/AccountForm';
import { getUserProfile } from '@/app/lib/actions/userProfileActions';

const AccountPage: FC = async () => {
    const profile = await getUserProfile();

    return (
        <Main>
            <div className="flex flex-col items-center">
                <AccountForm profile={profile} />
            </div>
        </Main>
    );
};

const Page: FC = () => {
    return (
        <Suspense fallback={
            <Main>
                <div className="flex flex-col items-center">
                    <div className="h-8 w-48 skeleton mb-4"></div>
                    <AccountFormSkeleton />
                </div>
            </Main>
        }>
            <AccountPage />
        </Suspense>
    );
};

export default Page;