'use client';

import { useRouter } from 'next/navigation';
import { useAuthActions } from '@convex-dev/auth/react';

import { SubmitButton } from '@gib/ui';

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

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