import React from 'react';
import { View, StyleSheet, Pressable, Text } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { usePathname } from 'expo-router';
import { Link } from 'expo-router';

const navItems = [
    {
        href: '/',
        icon: 'home',
        label: 'Home',
        onPress: () => console.log("home"),
    },
    {
        href: '/notify',
        icon: 'edit-document',
        label: 'Notify',
        onPress: () => console.log("notify"),
    },
    {
        href: '/explore',
        icon: 'person',
        label: 'Profile',
        onPress: () => console.log("profile"),
    },
];

const NavItem = ({ href, icon, label, onPress, isActive }) => (
    <Link href={href}>
        <Pressable onPress={onPress} style={[styles.navItem]}>
            <Icon name={icon} size={30} style={[styles.icon, {opacity: isActive ? 1 : 0.5}]} />
            <Text style={[styles.textLink, {opacity: isActive ? 1 : 0.5}]}>{label}</Text>
        </Pressable>
    </Link>
);

export function Navbar() {

    const pathName = usePathname();

    return (
        <View style={styles.navContainer}>
            {navItems.map((item, index) => (
                <NavItem key={index} {...item} isActive={pathName == item.href} />
            ))}
        </View>
    );
}

const styles = StyleSheet.create({
    navContainer: {
        backgroundColor: "#396868",
        paddingVertical: 10,
        width: "100%",
        flexDirection: "row",
        justifyContent: "space-evenly",
    },
    navItem: {
        alignItems: 'center',
    },
    icon: {
        color: "#FFF",
        active:{
            color:"#"
        }
    },
    textLink: {
        color: "#FFF",
    },
});