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

type Props = {
  navigation: NavigationProp<any>;
  activeTab?: string;
};
const navTabs = [
  { label: "Trang chủ", icon: "home-outline", route: "homepage" },
  { label: "Sản phẩm", icon: "cube-outline", route: "productlist" },
  { label: "Sửa chữa", icon: "settings-outline", route: "Repair" },
  { label: "Hỏi đáp", icon: "help-circle-outline", route: "FAQ" },
  { label: "Tài khoản", icon: "person-outline", route: "Account" },
];

const ButtonFooter: React.FC<Props> = ({ navigation, activeTab }) => {
  return (
    <View style={styles.footerNav}>
      {navTabs.map((tab, index) => {
        const isActive = activeTab === tab.route;
        return (
          <TouchableOpacity
            key={index}
            style={styles.navItem}
            onPress={() => navigation?.navigate(tab.route)}
          >
            <Ionicons
              name={tab?.icon}
              size={22}
              color={isActive ? "#4a00e0" : "#666"}
            />
            <Text style={[styles.navLabel, isActive && styles.navLabelActive]}>
              {tab.label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};
const styles = StyleSheet.create({
  footerNav: {
    flexDirection: "row",
    borderTopWidth: 1,
    borderColor: "#ddd",
    backgroundColor: "#fff",
    paddingVertical: 8,
    justifyContent: "space-around",
    bottom: 0,
    left: 0,
    width: "100%",
    ...Platform.select({
      web: { position: "fixed" as any },
      default: {
        position: "absolute",
      },
    }),
  },
  navItem: {
    alignItems: "center",
    flex: 1,
  },
  navLabel: {
    fontSize: 12,
    color: "#666",
    marginTop: 2,
  },
  navLabelActive: {
    color: "#4a00e0",
    fontWeight: "bold",
  },
});

export default ButtonFooter;
