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 { secureTokenStorage } from '~/utils/session-store';

import '../styles.css';

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

export default RootLayout;
