'use client';
import { useRouter } from 'next/navigation';
import { useAuthActions } from '@convex-dev/auth/react';
import { CardHeader, SubmitButton } from '@/components/ui';

export const SignOutForm = () => {
  const { signOut } = useAuthActions();
  const router = useRouter();

  return (
    <div className='flex justify-center'>
      <SubmitButton
        className='lg:w-2/3 w-5/6
          text-[1.0rem] font-semibold cursor-pointer
          hover:bg-red-700/60 dark:hover:bg-red-300/80'
        onClick={() => void signOut().then(() => router.push('/signin'))}
      >
        Sign Out
      </SubmitButton>
    </div>
  );
};