import { useEffect } from 'react';
import { Stack, useRouter } from 'expo-router';
import { useConvexAuth } from 'convex/react';

import { LoadingState } from '~/components/ui/loading-state';

const IndexRoute = () => {
  const { isAuthenticated, isLoading } = useConvexAuth();
  const router = useRouter();

  useEffect(() => {
    if (isLoading) return;
    if (isAuthenticated) {
      router.replace('/dashboard');
    } else {
      router.replace('/sign-in');
    }
  }, [isAuthenticated, isLoading, router]);

  return (
    <>
      <Stack.Screen options={{ title: 'Spoon' }} />
      <LoadingState label='Opening Spoon...' />
    </>
  );
};

export default IndexRoute;