import { FC, Suspense } from 'react';
import { Main } from '@/app/ui/Main';
import { UserSettingsForm as UserSettingsForm, UserSettingsFormSkeleton } from '@/app/ui/UserSettingsForm';
import { getUserSettings } from '@/app/lib/actions/userSettingsActions';

const UserSettingsPage: FC = async () => {
    const userSettings = await getUserSettings();

    return (
        <Main>
            <div className="flex flex-col items-center">
                <UserSettingsForm userSettings={userSettings} />
            </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>
                    <UserSettingsFormSkeleton />
                </div>
            </Main>
        }>
            <UserSettingsPage />
        </Suspense>
    );
};

export default Page;