import { Flex, Box, Text } from "@mantine/core";
import { Link, useRouterState } from "@tanstack/react-router";
import styles from "./styles.module.css";
import { Icon } from "@phosphor-icons/react";
import { useMemo } from "react";

interface NavLinkProps {
  href: string;
  label: string;
  Icon: Icon;
  include?: string[];
  exclude?: string[];
}

export const NavLink = ({
  href,
  label,
  Icon,
  include,
  exclude,
}: NavLinkProps) => {
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  const isActive = useMemo(
    () =>
      (!exclude?.some((e) => pathname.includes(e)) &&
        (pathname === href || (pathname.includes(href) && href !== "/"))) ||
      include?.includes(pathname),
    [pathname, href]
  );

  return (
    <Box
      component={Link}
      to={href}
      className={styles.navLinkBox}
      p={{ base: 0, sm: 8 }}
      aria-label={label}
      aria-current={isActive ? "page" : undefined}
    >
      <Flex
        direction={{ base: "column", md: "row" }}
        align="center"
        gap={{ base: 0, md: "xs" }}
      >
        <Icon
          weight={isActive ? "fill" : "regular"}
          size={28}
          style={{
            color: isActive ? "var(--mantine-primary-color-filled)" : undefined,
          }}
        />
        <Text
          visibleFrom="md"
          ta="center"
          size="md"
          fw={isActive ? 800 : 500}
          c={isActive ? "var(--mantine-primary-color-filled)" : undefined}
        >
          {label}
        </Text>
      </Flex>
    </Box>
  );
};