import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import ListeClassesScreen from './src/screens/ListeClassesScreen';
import FormClasseScreen from './src/screens/FormClasseScreen';
import DetailClasseScreen from './src/screens/DetailClasseScreen';
import { couleurs } from './src/theme';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <>
      <StatusBar style="dark" />
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerStyle: { backgroundColor: couleurs.carte },
            headerTintColor: couleurs.texte,
            headerTitleStyle: { fontWeight: '700' },
            contentStyle: { backgroundColor: couleurs.fond },
          }}
        >
          <Stack.Screen
            name="ListeClasses"
            component={ListeClassesScreen}
            options={{ title: 'Mes classes' }}
          />
          <Stack.Screen
            name="FormClasse"
            component={FormClasseScreen}
            options={{ title: 'Classe' }}
          />
          <Stack.Screen
            name="DetailClasse"
            component={DetailClasseScreen}
            options={{ title: 'Classe' }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}