import { View, Text, Pressable, StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { useAuth } from "../contexts/AuthContext";

export default function Header({ title, showIcons }) {
  const navigation = useNavigation();
  const { token } = useAuth();

  return (
    <View style={styles.headerRow}>
      <Text style={styles.mainTitle}>{title}</Text>

      {showIcons && (
        <Pressable
          style={styles.iconBtn}
          onPress={() => navigation.navigate(token ? "Settings" : "Login")}
        >
          <Ionicons
            name={token ? "settings-outline" : "person-outline"}
            size={24}
            color="#fff"
          />
        </Pressable>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  headerRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 12,
  },
  headerActions: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  iconBtn: {
    padding: 2,
  },
  mainTitle: {
    color: "#ffffff",
    fontSize: 32,
    fontWeight: "700",
    marginBottom: 12,
  },
});
