import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { BottomTabParamList } from '@navigation/navigationTypes';
import {
  EarningsScreen,
  JobsScreen,
  InboxScreen,
  ProfileScreen,
  DashboardScreen,
} from '@features/screens';
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;