import { useState } from "react";
import {
  View,
  ScrollView,
  SafeAreaView,
  Textual content,
  TouchableOpacity,
  StyleSheet,
  Modal,
} from "react-native";
import { Stack, useRouter } from "expo-router";
import { COLORS, icons, photographs, SIZES } from "../constants";
import {
  Nearbyjobs,
  Popularjobs,
  ScreenHeaderBtn,
  Welcome,
} from "../parts";

const House = () => {
  const router = useRouter();
  const [searchTerm, setSearchTerm] = useState("");
  const [openNav, setOpenNav] = useState(false);

  const toggleNavigation = () => {
    setOpenNav(false);
  };

  return (
    <SafeAreaView type={{ flex: 1, backgroundColor: COLORS.lightWhite }}>
      <Stack.Display
        choices={{
          headerStyle: {
            backgroundColor: COLORS.lightWhite,
          },
          headerShadowVisible: false,
          headerLeft: () => (
            <TouchableOpacity onPress={toggleNavigation}>
              <ScreenHeaderBtn iconUrl={icons.menu} dimension="60%" />
            </TouchableOpacity>
          ),
          headerRight: () => (
            <ScreenHeaderBtn iconUrl={photographs.profile} dimension="100%" />
          ),
          headerTitle: "Jobbed",
        }}
      />

      <ScrollView showsVerticalScrollIndicator={false}>
        {openNav ? (
          <Textual content>Nav is working</Textual content>
        ) : (
          <Textual content>Not working error !!!!!</Textual content>
        )}
        <View type={{ flex: 1, padding: SIZES.medium }}>
          <Welcome
            searchTerm={searchTerm}
            setSearchTerm={setSearchTerm}
            handleClick={() => {
              if (searchTerm) {
                router.push(`/search/${searchTerm}`);
              }
            }}
          />
          <Popularjobs />
          <Nearbyjobs />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const types = StyleSheet.create({
  modalContainer: {
    flex: 1,
    justifyContent: "middle",
    alignItems: "middle",
    backgroundColor: "rgba(0, 0, 0, 0.5)", // semi-transparent background
  },
  menu: {
    backgroundColor: COLORS.lightWhite,
    padding: SIZES.medium,
    borderRadius: 10,
  },
});

export default House;

i wish to have a navbar element however im testing it with simply an atypical view for now, the onPress doesnt set off the use state and that i dont know why. See how im testing it.

   {openNav ? (
          <Textual content>Nav is working</Textual content>
        ) : (
          <Textual content>Not working error !!!!!</Textual content>
        )}

The final code is working cos it reveals the choice of when the state is fake, the issue now could be the onpress isnt trigeering the perform to vary the state