'use server';
import { preloadQuery } from 'convex/nextjs';
import { api } from '~/convex/_generated/api';
import { Card, Separator } from '@/components/ui';
import {
  AvatarUpload,
  ProfileHeader,
  ResetPasswordForm,
  SignOutForm,
  UserInfoForm,
} from '@/components/layout/profile';

const Profile = async () => {
  const preloadedUser = await preloadQuery(api.auth.getUser);
  return (
    <Card className='max-w-xl min-w-xs sm:min-w-md mx-auto mb-8'>
      <ProfileHeader preloadedUser={preloadedUser} />
      <AvatarUpload preloadedUser={preloadedUser} />
      <Separator />
      <UserInfoForm preloadedUser={preloadedUser} />
      <Separator />
      <ResetPasswordForm />
      <Separator />
      <SignOutForm />
    </Card>
  );
};
export default Profile;