import {
  StatusBar,
  useColorScheme,
} from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import { GameViewport } from './src/components/GameViewport';
import { useBackgroundMusic } from './src/hooks/useBackgroundMusic';
import { AppNavigator } from './src/navigation/AppNavigator';

function App() {
  const isDarkMode = useColorScheme() === 'dark';
  useBackgroundMusic();

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <GameViewport>
        <AppNavigator />
      </GameViewport>
    </SafeAreaProvider>
  );
}

export default App;