import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";
import { Text, StyleSheet } from "react-native";

// Import screens
import Home from "../screens/AksesWarga/Home";
import EcoMapCoinExchangeScreen from "../screens/AksesWarga/EcoMapCoinExchangeScreen";
import NotifikasiScreen from "../screens/AksesWarga/NotifikasiScreen";
import ProfilScreen from "../screens/AksesWarga/ProfilScreen";

const Tab = createBottomTabNavigator();

export default function bottomtab() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarStyle: {
          backgroundColor: "#fff", // White background for the tab bar
          borderTopWidth: 1,
          borderTopColor: "#2C6B2F",
          marginBottom: 20,
        },
        tabBarIcon: ({ focused, color, size }) => {
          // Set color to green explicitly
          const iconColor = "#2C6B2F"; // Green color for icons
          let iconName;

          if (route.name === "Home") {
            iconName = "home";
          } else if (route.name === "EcoMapCoin") {
            iconName = "swap-horizontal";
          } else if (route.name === "Notifikasi") {
            iconName = "notifications-outline";
          } else if (route.name === "Profil") {
            iconName = "person-circle-outline";
          }

          // Return an icon component with the green color
          return <Ionicons name={iconName} size={size} color={iconColor} />;
        },
        tabBarLabel: ({ focused, color }) => {
          let label;
          if (route.name === "Home") {
            label = "UTAMA";
          } else if (route.name === "EcoMapCoin") {
            label = "TUKAR KOIN";
          } else if (route.name === "Notifikasi") {
            label = "NOTIFIKASI";
          } else if (route.name === "Profil") {
            label = "PROFIL";
          }
          return (
            <Text style={{ color: "#2C6B2F", fontSize: 12 }}>{label}</Text>
          ); // Green text color
        },
      })}
    >
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen
        name="EcoMapCoin"
        component={EcoMapCoinExchangeScreen}
        options={{ title: "Tukar Koin" }}
      />
      <Tab.Screen
        name="Notifikasi"
        component={NotifikasiScreen}
        options={{ title: "Notifikasi" }}
      />
      <Tab.Screen
        name="Profil"
        component={ProfilScreen}
        options={{ title: "Profil" }}
      />
    </Tab.Navigator>
  );
}

const styles = StyleSheet.create({
  bottomNav: {
    flexDirection: "row",
    justifyContent: "space-around",
    paddingVertical: 10,
    backgroundColor: "#fff",
    borderTopWidth: 1,
    borderTopColor: "#2C6B2F",
    marginBottom: 0, // Green border
  },
  navItem: {
    alignItems: "center",
  },
  navText: {
    fontSize: 12,
    color: "#2C6B2F", // Green text color
  },
  notifIconContainer: {
    position: "relative",
  },
  badge: {
    position: "absolute",
    top: -5,
    right: -5,
    backgroundColor: "red",
    borderRadius: 8,
    paddingHorizontal: 5,
    paddingVertical: 2,
  },
  badgeText: {
    color: "#fff",
    fontSize: 10,
  },
});