import { ClerkProvider, SignedIn, SignedOut } from '@clerk/clerk-expo'
import { tokenCache } from '@clerk/clerk-expo/token-cache'
import { Stack } from 'expo-router'
import React from 'react'

export default function Root() {
    // Set up the auth context and render our layout inside of it.
    return (
        <ClerkProvider tokenCache={tokenCache}>
            <RootNavigator />
        </ClerkProvider>
    )
}

// Separate this into a new component so it can access the SessionProvider context later
function RootNavigator() {
    return (
        <Stack screenOptions={{ headerShown: false }}>
            <SignedIn>
                <Stack.Screen options={{ headerShown: false }} name='(tabs)' />
            </SignedIn>
            <SignedOut>
                <Stack.Screen options={{ headerShown: false }} name='(auth)' />
            </SignedOut>
        </Stack>
    )
}