"use client";

import { useMemo } from "react";
import { Group, Stack, Text } from "@mantine/core";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import ThemeIcon from "@/components/ui/ThemeIcon/ThemeIcon";
import linksData from "../data/linksData";
import NavbarClickable from "./NavbarClickable";

const NavbarLinks = () => {
    const { modulesSet } = useProjectsContext();
    const filteredLinks = useMemo(
        () =>
            linksData.filter(
                link => !link.moduleName || modulesSet.has(link.moduleName)
            ),
        [modulesSet]
    );

    return (
        <Stack gap={"xs"}>
            {filteredLinks.map((linkData, index) => (
                <NavbarClickable
                    href={linkData.href}
                    key={linkData.label}>
                    <Group
                        key={index}
                        px={"xs"}
                        w={"100%"}
                        justify={"left"}
                        wrap={"nowrap"}
                        gap={"xs"}>
                        <ThemeIcon size={"sm"}>
                            <linkData.icon />
                        </ThemeIcon>
                        <Text>{linkData.label}</Text>
                    </Group>
                </NavbarClickable>
            ))}
        </Stack>
    );
};

export default NavbarLinks;
