import { Tabs } from "expo-router";
import { TabBarIcon } from "@/components/navigation/TabBarIcon";
import { Colors } from "@/constants/Colors";
import { useColorScheme } from "@/hooks/useColorScheme";

const TabLayout = () => {
  const scheme = useColorScheme() ?? 'dark';

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[scheme].tint,
        headerShown: false,
        headerStyle: {
          backgroundColor: Colors[scheme].background,
        },
        headerShadowVisible: false,
        headerTintColor: Colors[scheme].tint,
        tabBarStyle: {
          backgroundColor: Colors[scheme].background,
          borderTopColor: Colors[scheme].tint,
          borderTopWidth: 1,
        },
      }}
    >

      <Tabs.Screen
        name='index'
        options={{
          title: 'Home',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} /> 
          ),
        }}
      />

      <Tabs.Screen 
        name='messages'
        options={{
          headerShown: true,
          title: 'Messages',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'chatbubbles' : 'chatbubbles-outline'} color={color} /> 
          ),
        }}
      />

      <Tabs.Screen 
        name='settings'
        options={{
          title: 'Settings',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'settings' : 'settings-outline'} color={color} /> 
          ),
        }}
      />

    </Tabs>
  );
};
export default TabLayout;