import React from "react";
import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
import { Ionicons, FontAwesome5 } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";

const BottomTabAdmin = () => {
  const navigation = useNavigation();

  return (
    <View style={styles.bottomNav}>
      <TouchableOpacity
        style={styles.navItem}
        onPress={() => navigation.navigate("AdminScreen")}
      >
        <Ionicons name="home" size={30} color="#2C6B2F" />
        <Text style={styles.navText}>UTAMA</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.navItem}
        onPress={() => navigation.navigate("TukarKoin")}
      >
        <FontAwesome5 name="exchange-alt" size={24} color="#2C6B2F" />
        <Text style={styles.navText}>TUKAR KOIN</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={styles.navItem}
        onPress={() => navigation.navigate("NotifikasiAdminScreen")}
      >
        <View style={styles.notifIconContainer}>
          <Ionicons name="notifications-outline" size={24} color="#2C6B2F" />
          {/* Ensure the badge text is wrapped in Text component */}
          <View style={styles.badge}>
            <Text style={styles.badgeText}>1</Text>
          </View>
        </View>
        <Text style={styles.navText}>NOTIFIKASI</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.navItem}
        onPress={() => navigation.navigate("ProfilAdminScreen")}
      >
        <Ionicons name="person-circle-outline" size={24} color="#2C6B2F" />
        <Text style={styles.navText}>PROFIL</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  bottomNav: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-around",
    backgroundColor: "#fff",
    paddingVertical: 8,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.1,
    shadowRadius: 6,
    elevation: 5,
  },
  navItem: {
    flex: 1, // Membuat tiap tombol punya lebar yang sama
    alignItems: "center",
    padding: 6,
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 5,
    marginHorizontal: 5,
  },
  navText: { color: "#2C6B2F", fontSize: 12, marginTop: 5 },
  notifIconContainer: { position: "relative" },
  badge: {
    position: "absolute",
    right: -5,
    top: -5,
    backgroundColor: "#E74C3C",
    borderRadius: 10,
    paddingHorizontal: 6,
    paddingVertical: 2,
  },
  badgeText: { color: "#fff", fontSize: 10, fontWeight: "bold" },
});

export default BottomTabAdmin;