import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useColorScheme } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/ProfileScreen';
import { COLORS } from '../theme/colors';

const Tab = createBottomTabNavigator();

export default function TabNavigator() {
  const colorScheme = useColorScheme();
  const isDark = colorScheme === 'dark';
  const themeColors = isDark ? COLORS.DARK : COLORS.LIGHT;

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'Profile') {
            iconName = focused ? 'person' : 'person-outline';
          }

          return <Ionicons name={iconName as any} size={20} color={color} />;
        },
        tabBarActiveTintColor: themeColors.brand,
        tabBarInactiveTintColor: isDark ? '#a0aec0' : 'gray',
        tabBarStyle: {
          backgroundColor: themeColors.card,
          borderTopColor: isDark ? '#2d3748' : '#e2e8f0',
          height: 60
        },
        headerStyle: {
          backgroundColor: themeColors.card,
        },
        headerTitleStyle: {
          color: themeColors.text,
          fontSize: 17,
        },
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen 
        name="Profile" 
        component={ProfileScreen}
        options={{
          tabBarItemStyle: {
            borderLeftWidth: 1.5,
            borderLeftColor: isDark ? '#4A5568' : '#E2E8F0',
          }
        }}
      />
    </Tab.Navigator>
  );
}
