'use client';

import type { Preloaded } from 'convex/react';
import { usePreloadedQuery } from 'convex/react';

import type { api } from '@gib/backend/convex/_generated/api.js';
import { CardDescription, CardHeader, CardTitle } from '@gib/ui';

interface ProfileCardProps {
  preloadedUser: Preloaded<typeof api.auth.getUser>;
}

const ProfileHeader = ({ preloadedUser }: ProfileCardProps) => {
  const user = usePreloadedQuery(preloadedUser);
  return (
    <CardHeader className="pb-2">
      <CardTitle className="text-2xl">
        {user?.name ?? user?.email ?? 'Your Profile'}
      </CardTitle>
      <CardDescription>
        Manage your personal information &amp; how it appears to others.
      </CardDescription>
    </CardHeader>
  );
};

export { ProfileHeader };
