import FontAwesome from '@expo/vector-icons/FontAwesome';
import { Tabs } from 'expo-router';
import { useColorScheme, View } from 'react-native';

import Colors from '@/constants/Colors';
import i18n from '@/i18n';
import { CityProvider } from '../../context/CityContext';

/**
 * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
 */
function TabBarIcon(props: {
  name: React.ComponentProps<typeof FontAwesome>['name'];
  color: string;
}) {
  return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
}

export default function TabLayout() {
  const colorScheme = 'dark'; // Force dark mode

  return (
    <CityProvider>
      <Tabs
        screenOptions={{
          tabBarActiveTintColor: Colors[colorScheme].tint,
          tabBarStyle: {
            backgroundColor: Colors[colorScheme].secondary,
            borderTopColor: Colors[colorScheme].secondary,
          },
          headerShown: false, // hide header globally for tabs
        }}>
        <Tabs.Screen
          name="home"
          options={{
            title: i18n.t('home'),
            tabBarIcon: ({ color }) => <TabBarIcon name="home" color={color} />,
          }}
        />
        <Tabs.Screen
          name="services"
          options={{
            title: i18n.t('services'),
            tabBarIcon: ({ color }) => <TabBarIcon name="th-large" color={color} />,
          }}
        />
        <Tabs.Screen
          name="index"
          options={{
            title: i18n.t('menuSalah'),
            tabBarIcon: ({ color }) => <TabBarIcon name="moon-o" color={color} />,
          }}
        />
        <Tabs.Screen
          name="programs"
          options={{
            title: i18n.t('Programs'),
            tabBarIcon: ({ color }) => <TabBarIcon name="calendar" color={color} />,
          }}
        />
      </Tabs>
    </CityProvider>
  );
}