import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { } from 'expo-router';
import React from 'react';


import { HapticTab } from '@/components/haptic-tab';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';
import BonjourScreen from './bonjourFL';
import ListMateriel from './gestionnaire_ressource';
import Home from './home';
import MapScreen from './mapScreen';

const Tabs = createBottomTabNavigator();

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs.Navigator
      initialRouteName='explore'
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        tabBarButton: HapticTab,
    }}>
      <Tabs.Screen
        name="home"
        component={Home}
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="house.fill" color={color} />
          ),
        }}
      />  
      <Tabs.Screen
        name="gestionnaire_ressource"
        component={ListMateriel}
        options={{
          title: 'Ressources',
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="hammer.fill" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="bonjourFL"
        component={BonjourScreen}
        options={{
          title: 'Bonjour',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
        }}
      />
      <Tabs.Screen
        name="explore"
        component={MapScreen}
        options={{
          title: 'MapScreen',
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
        }}
      >

      </Tabs.Screen>
      
    </Tabs.Navigator>
  );
}