import { useColorScheme } from 'react-native';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { ConvexAuthProvider } from '@convex-dev/auth/react';

import { convex } from '~/utils/convex';

import '../styles.css';

const RootLayout = () => {
  const colorScheme = useColorScheme();
  return (
    <ConvexAuthProvider client={convex}>
      <Stack
        screenOptions={{
          headerStyle: {
            backgroundColor: colorScheme === 'dark' ? '#1c1917' : '#faf9f7',
          },
          headerTintColor: colorScheme === 'dark' ? '#fafaf9' : '#1c1917',
          contentStyle: {
            backgroundColor: colorScheme === 'dark' ? '#1c1917' : '#faf9f7',
          },
        }}
      />
      <StatusBar style='auto' />
    </ConvexAuthProvider>
  );
};

export default RootLayout;
