import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { useRouter } from "../router";
import { TABS } from "../../App";
import { colors } from "../styles";


export function BottomNav() {
  const { route, navigate } = useRouter();

  return (
    <View style={styles.bar}>
      {TABS.filter((tab) => !tab.hideInNav).map((tab) => {
        const active = tab.route === route;
        return (
          <TouchableOpacity
            key={tab.route}
            style={styles.tab}
            onPress={() => navigate(tab.route)}
            activeOpacity={0.7}
          >
            <Text style={[styles.label, active && styles.labelActive]}>
              {tab.label}
            </Text>
            {active && <View style={styles.indicator} />}
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  bar: {
    flexDirection: "row",
    height: 74,
    borderTopWidth: 1,
    borderTopColor: colors.border,
    backgroundColor: colors.surface,
  },
  tab: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  label: {
    fontSize: 13,
    color: colors.textMuted,
    fontWeight: "500",
  },
  labelActive: {
    color: colors.textPrimary,
    fontWeight: "700",
  },
  indicator: {
    position: "absolute",
    top: 0,
    width: 32,
    height: 3,
    borderRadius: 2,
    backgroundColor: colors.accent,
  },
});
