'use server';

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

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

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