'use server';

import {
  AvatarUpload,
  ProfileHeader,
  ResetPasswordForm,
  UserInfoForm,
} from '@/components/layout/auth/profile';
import { preloadQuery } from 'convex/nextjs';

import { api } from '@spoon/backend/convex/_generated/api.js';
import { Card, Separator } from '@spoon/ui';

const SettingsProfilePage = async () => {
  const preloadedUser = await preloadQuery(api.auth.getUser, {});
  const preloadedUserProvider = await preloadQuery(
    api.auth.getUserProvider,
    {},
  );
  return (
    <section className='max-w-3xl space-y-4'>
      <div>
        <h2 className='text-xl font-semibold'>Profile</h2>
        <p className='text-muted-foreground mt-1 text-sm'>
          Manage your identity, avatar, and account email.
        </p>
      </div>
      <Card className='shadow-none'>
        <ProfileHeader />
        <AvatarUpload preloadedUser={preloadedUser} />
        <Separator className='my-6' />
        <UserInfoForm
          preloadedUser={preloadedUser}
          preloadedProvider={preloadedUserProvider}
        />
        <ResetPasswordForm preloadedProvider={preloadedUserProvider} />
      </Card>
    </section>
  );
};

export default SettingsProfilePage;
