import React from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import RootNavigator from './src/navigation/RootNavigator';
import ErrorBoundary from './src/components/ErrorBoundary';

export default function App() {
  const isWeb = Platform.OS === 'web';
  return (
    <ErrorBoundary>
      <SafeAreaProvider>
        <View style={[styles.outer, isWeb && styles.webOuter]}>
          <View style={[styles.inner, isWeb && styles.webInner]}>
            <NavigationContainer>
              <StatusBar style="dark" />
              <RootNavigator />
            </NavigationContainer>
          </View>
        </View>
      </SafeAreaProvider>
    </ErrorBoundary>
  );
}

const styles = StyleSheet.create({
  outer: { flex: 1 },
  webOuter: {
    flex: 1,
    backgroundColor: '#E5E7EB',
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: '100%' as any,
  },
  inner: { flex: 1 },
  webInner: {
    width: '100%',
    maxWidth: 480,
    height: '100%' as any,
    minHeight: 800,
    backgroundColor: '#F9FAFB',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.15,
    shadowRadius: 20,
    elevation: 10,
  },
});