import { Link, usePathname } from "expo-router";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { colors, commonStyles } from "./styles";
import { MenuItem } from "./types";

interface DesktopMenuProps {
    items: readonly MenuItem[];
}

export function DesktopMenu({ items }: DesktopMenuProps) {
    const pathname = usePathname();

    return (
        <View style={styles.tabContainer}>
            {items.map((item) => (
                <Link
                    href={item.href}
                    key={item.href}
                    style={[
                        styles.menuItem,
                        pathname === item.href && styles.activeMenuItem,
                    ]}
                >
                    <Text 
                        style={[
                            commonStyles.menuText,
                            pathname === item.href && commonStyles.activeMenuText,
                        ]}
                    >
                        {item.label}
                    </Text>
                </Link>
            ))}
        </View>
    );
}

const styles = StyleSheet.create({
    tabContainer: {
        flexDirection: "row",
    },
    menuItem: {
        paddingVertical: 18,
        paddingHorizontal: 16,
        borderBottomWidth: 4,
        borderBottomColor: "transparent",
    },
    activeMenuItem: {
        borderBottomWidth: 4,
        borderBottomColor: colors.primary,
    },
});