'use client';

import { montserrat } from '@/app/fonts';
import { Separator } from '@/ui/components/shadcn/separator';
import { useClerk } from '@clerk/nextjs';
import { useQueryClient } from '@tanstack/react-query';

export type UserProfileButtonProps = {
    username: string;
};

export function UserManagmentPopover({ username }: UserProfileButtonProps) {
    const queryClient = useQueryClient();

    const { signOut } = useClerk();

    const onSignOutUser = () => {
        signOut({ redirectUrl: '/api/user/unload' }).then(() => {
            queryClient.invalidateQueries({ queryKey: ['sessionData'] });
            console.log(`Signing out user: ${username}`);
        });
    };

    return (
        <>
            <div className='space-y-4'>
                <p className='text-sm font-medium leading-none'>{username}</p>
                <Separator />
                <button
                    className='flex h-[24px] w-full cursor-pointer items-center justify-start'
                    onClick={onSignOutUser}
                >
                    <p
                        className={`text-sm font-medium leading-none ${montserrat.className}`}
                    >
                        Sign out
                    </p>
                </button>
            </div>
        </>
    );
}