'use client';

import { CardHeader } from '@/components/ui';
import { SubmitButton } from '@/components/default';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/components/context';
import { signOut } from '@/lib/actions';

export const SignOut = () => {
	const { isLoading, refreshUserData } = useAuth();
	const router = useRouter();

	const handleSignOut = async () => {
		const result = await signOut();
		if (result?.success) {
			await refreshUserData();
			router.push('/sign-in');
		}
	};
	return (
		<div className='flex justify-center'>
			<CardHeader className='md:w-5/6 w-full'>
				<SubmitButton
					className='text-[1.0rem] font-semibold cursor-pointer
            hover:bg-red-700/60 dark:hover:bg-red-300/80'
					disabled={isLoading}
					onClick={handleSignOut}
				>
					Sign Out
				</SubmitButton>
			</CardHeader>
		</div>
	);
};