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

const SHOP_DOMAIN = 'your-shop.myshopify.com';
const DEVELOPER_API_KEY = 'sf_test_your_api_key';
const API_BASE_URL = 'https://your-stackfront-api.example.com';
const APP_VERSION = '1.0.0';

function AppContent() {
  const { ready, config } = useStackfront();

  if (!ready) {
    return null; // or a loading screen
  }

  return (
    <>
      <StatusBar style="dark" />
      <RootNavigator />
    </>
  );
}

export default function App() {
  return (
    <StackfrontProvider
      shopDomain={SHOP_DOMAIN}
      developerApiKey={DEVELOPER_API_KEY}
      apiBaseUrl={API_BASE_URL}
      appVersion={APP_VERSION}
    >
      <GestureHandlerRootView style={{ flex: 1 }}>
        <SafeAreaProvider>
          <NavigationContainer>
            <AppContent />
          </NavigationContainer>
        </SafeAreaProvider>
      </GestureHandlerRootView>
    </StackfrontProvider>
  );
}