import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { BottomTabParamList } from '@navigation/navigationTypes';
import DashboardScreen from '@features/screens/dashboardScreen';
import EarningsScreen from '@features/screens/earningsScreen';
import JobsScreen from '@features/screens/jobsScreen';
import InboxScreen from '@features/screens/inboxScreen/inboxScreen';
import ProfileScreen from '@features/screens/profileScreen/profileScreen';
import { useAppTheme } from '@theme';
import { RouteNames } from '@utils/constants';

const Tab = createBottomTabNavigator<BottomTabParamList>();

const BottomTabNavigator: React.FC = () => {
  const { colors } = useAppTheme();

  return (
    <Tab.Navigator
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: colors.primary,
        tabBarInactiveTintColor: colors.textSecondary,
        tabBarStyle: { backgroundColor: colors.background },
      }}
    >
      <Tab.Screen 
        name={RouteNames.Dashboard} 
        component={DashboardScreen} 
        options={{ tabBarLabel: 'Home' }}
      />
      <Tab.Screen 
        name={RouteNames.Earnings} 
        component={EarningsScreen} 
        options={{ tabBarLabel: 'Earning' }}
      />
      <Tab.Screen 
        name={RouteNames.Jobs} 
        component={JobsScreen} 
        options={{ tabBarLabel: 'Jobs' }}
      />
      <Tab.Screen 
        name={RouteNames.Inbox} 
        component={InboxScreen} 
        options={{ tabBarLabel: 'Inbox' }}
      />
      <Tab.Screen 
        name={RouteNames.Profile} 
        component={ProfileScreen} 
        options={{ tabBarLabel: 'Account' }}
      />
    </Tab.Navigator>
  );
};

export default BottomTabNavigator;