import { Appbar, useTheme } from "react-native-paper";
import { Image, useColorScheme, View } from "react-native";
import React from "react";
import styles from "@/assets/styles";

const TopNav = ({ toggleMenu }: { toggleMenu: () => void; }) => {
    const theme = useTheme();
    const colorScheme = useColorScheme();

    return (
        <View style={{ backgroundColor: theme.colors.background }}>
            <Appbar.Header style={[styles.topBar, { backgroundColor: theme.colors.primaryContainer }]}>
                <View>
                    <Appbar.Action icon="menu"
                        onPress={toggleMenu}
                        iconColor={theme.colors.primary} />
                </View>
                <View style={styles.logoContainer} >
                    <Image source={
                        colorScheme === 'dark' ?
                            require("../assets/images/pogdark_logo_inverse.png") : require("../assets/images/pogdark_logo.png")
                    } style={styles.logo} resizeMode={"contain"} />
                </View>
                <Appbar.Action icon="pencil" color={ theme.colors.primaryContainer } />
            </Appbar.Header>
        </View>
    );
};

export default TopNav;