//This file serves as the index.tsx file (main)


import { MaterialCommunityIcons } from '@expo/vector-icons'; 
import { Link, Tabs } from 'expo-router';
import { Pressable } from 'react-native';

import { appTheme } from "../../theme";


import Colors from '../../constants/Colors';

// creatign tab bar icons and passing establishing properties to be passed during exectution
// see more icon families at https://icons.expo.fyi/

function TabBarIcon(props: {
  name: React.ComponentProps<typeof MaterialCommunityIcons>['name'];
  color: string;
}) {
  return <MaterialCommunityIcons size={28} style={{ marginBottom: -3 }} {...props} />;
}

// Creating the tab bar at the bottom

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

  return (

    <Tabs
      screenOptions={{
        tabBarActiveTintColor: appTheme["color-primary-500"],
      }}>
      
     
      <Tabs.Screen
        name="search_tab" //defining which tab should be rendered, this tab will call a screen component from the component folder
        options={{
          title: '',
          tabBarLabel: 'Search',
          tabBarIcon: ({ color }) => <TabBarIcon name="magnify" color={color} />, //using the tabBarIcon option within tabs and calling the TabBarIcon function created above to pass the established properties to it

          // Info circle at the top right
          // headerRight: () => (
          //   <Link href="/modal" asChild>
          //     <Pressable>
          //       {({ pressed }) => (
          //         <FontAwesome
          //           name="info-circle"
          //           size={25}
          //           color={Colors[colorScheme ?? 'light'].text}
          //           style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
          //         />
          //       )}
          //     </Pressable>
          //   </Link>
          // ),

        }}
      />

      <Tabs.Screen
        name="saved_tab"
        options={{
          title: '',
          tabBarLabel: 'Saved',
          tabBarIcon: ({ color }) => <TabBarIcon name="heart-outline" color={color} />,
        }}
      />

      <Tabs.Screen
        name="account_tab"
        options={{
          title: '',
          tabBarLabel: 'Account',
          tabBarIcon: ({ color }) => <TabBarIcon name="account-circle-outline" color={color} />,
        }}
      />

    </Tabs>
  );
}