'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>
      <CardTitle className='text-xl'>Account Settings</CardTitle>
      <CardDescription>
        Update your profile information and manage your account preferences
      </CardDescription>
    </CardHeader>
  );
};

export { ProfileHeader };
