import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';

import { BookingProvider, useBooking } from './src/context/BookingContext';
import AppNavigator from './src/navigation/AppNavigator';
import BookingModal from './src/components/BookingModal';

function AppContent() {
  const { isOpen, closeBookingModal } = useBooking();
  return (
    <>
      <AppNavigator />
      <BookingModal isOpen={isOpen} onClose={closeBookingModal} />
      <StatusBar style="light" />
    </>
  );
}

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <BookingProvider>
          <NavigationContainer>
            <AppContent />
          </NavigationContainer>
        </BookingProvider>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}
